1

内部スクロール div を持つ、作成中のページ用のシームレスなスクローラーを作成しようとしています。これが私がそれをどのように機能させたいかです：

  1. scrollTop が div の上部に達するまで、ユーザーはページを下にスクロールします。
  2. divがoverflow:hiddenからoverflow:scrollに変わります。
  3. 次に、ユーザーは div を最後までスクロールします。
  4. ページは再びスクロールを開始し、div は再びoverflow:scroll からoverflow:hidden に戻ります。(これは、ページを逆方向にスクロールしても、div にヒットしたときにスクロールが早まって開始されないためです。)

プロセスは逆に同じように機能するはずです。状態を使用すると役立つと思いました。私の 3 つの状態は、pre、on、およびpostです。しきい値を超えて状態がpreの場合、状態がonに変わり、スクロールのために div が「ロック解除」されます。次に、div のスクロールが完了すると、ページ全体が自然に押し上げられます。状態がonからpostに切り替わりました。

私の問題は、スクロールが速すぎると、手遅れになるまでブラウザがこれらの変更を登録せず、div が既に過ぎ去っていることです。移行を管理するために次のコードを書きました。

function onScroll() {
    if (cur_coord > cap_y && 
            cap_state == 'pre') { // Pre -> On
        container.css({ 'overflow-y':'scroll'});
        $(window).scrollTop(cap_y); 
        cap_state = 'on';
    } else if (cur_coord > cap_y && 
            cap_state == 'on') { // On -> Post
        container.css({ 'overflow-y':'hidden'});
        cap_state = 'post';
    } else if (cur_coord < cap_y && 
            cap_state == 'post') { // Post -> On
        container.css({ 'overflow-y':'scroll'});
        $(window).scrollTop(cap_y);
        cap_state = 'on';
    } else if (cur_coord < cap_y &&   
            cap_state == 'on') { // On -> Pre
        container.css({ 'overflow-y': 'hidden'});
        cap_state = 'pre';
    }
}

そして、私は遊ぶためのフィドルを作成しました:

http://jsfiddle.net/vD8kQ/6/

これをシームレスなスクロール体験にする方法はありますか?

ありがとう！

4

1 に答える 1

1

独自のスクローラーを構築したい場合、これはオプションではありません。jQueryライブラリを使用しても構わない場合... http://manos.malihu.gr/jquery-custom-content-scroller/

于 2013-03-15T16:10:17.407 に答える