この単純な HTML 構造があるとしましょう。
<header>
<title>Test</title>
</header>
<body>
<div class="section" id="section-1"></div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
</body>
...そしてこのCSSスタイル:
.section{
float: left;
width: 100%;
height: 600px;
}
#section-1{ background: red; }
#section-2{ background: green; }
#section-3{ background: blue; }
ここで動作を確認できます: http://jsfiddle.net/ZMv2r/
ユーザーがこのページを垂直方向にドラッグし、ユーザーがどこにいるかに応じて、特定の div に移動できる方法を見つけようとしています。
1 - ユーザーが赤い div を下にドラッグすると、スクロールは次の緑の div に移動します。ユーザーが赤い div を上にドラッグすると、この div で続行されます。
2 - ユーザーが緑色の div を下にドラッグすると、スクロールは次の青色の div に移動します。ユーザーが緑の div を上にドラッグすると、スクロールは前の赤の div に移動します。
3 - ユーザーが blu div を下にドラッグすると、この div に続きます。ユーザーが青い div を上にドラッグすると、スクロールは前の緑の div に移動します。
これらのアクションをどこから始めればよいかわかりません。jQuery UI でこんなことができるのではないかと思います。
ありがとうございました。