0

この単純な 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 でこんなことができるのではないかと思います。

ありがとうございました。

4

1 に答える 1