3

作成しているページがあり、スクロール（上または下）するとページが次のdivにスクロールするようにします（各divはウィンドウの高さの100％です）。そして、もう一度スクロールするまで、そこで「修正」されます。私が達成しようとしていることの例はここで見ることができます：

http://testdays.hondamoto.ch/

下にスクロールすると、自動的に次の「div」に移動します。

私が試したこと：

  • jQuery.scrollイベントを以下と組み合わせて使用​​します。

        function updatePosition() {
      if(canScroll) {
        var pageName;
        canScroll = false;
        var st = $(window).scrollTop();
        if (st > lastScrollTop){
           // downscroll code
           if(pageNumber < 7) {
               pageNumber++;
           }
           pageName = '#' + getPageToScrollTo().id;
           $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
               canScroll = true;
           });
        } else {
          // upscroll code
          if(pageNumber > 0) {
              pageNumber--;
          }
          pageName = '#' + getPageToScrollTo().id;
          $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
               canScroll = true;
            });
        }
        lastScrollTop = st;
      }
    }

しかし、スクロールイベントは、ページがスクロール（アニメーション）しているとき、およびユーザーがスクロールしているときに呼び出されていました。ユーザーがスクロールしたときにだけ呼び出す必要があります。

それから私は追加しました：

var throttled = _.throttle(updatePosition, 3000);

$(document).scroll(throttled);

Underscore.jsライブラリから-しかし、それでも同じことをしました。

最後に、ここを少し見て、次のことを見つけました。

Scrollは、animate（）ではなく、ユーザーがスクロールするときにのみ呼び出します。

しかし、私はそのソリューションを実装できませんでした。これを機能させるためのライブラリやメソッドを知っている人はいますか？

編集：ベーシックの答えに基づく解決策：

  function nextPage() {
        canScroll = false;
        if(pageNumber < 7) {
            pageNumber++;
        }
        pageName = getPageToScrollTo();
        $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
            canScroll = true;
        });
    }

    function prevPage() {
        canScroll = false;
        if(pageNumber > 0) {
        pageNumber--;
      }
      pageName = getPageToScrollTo();
      $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
         canScroll = true;
      });
    }

    //--Bind mouseWheel
    $(window).on(mousewheelevt, function(event) {
        event.preventDefault();
        if(canScroll){
          if(mousewheelevt == "mousewheel") {
              if (event.originalEvent.wheelDelta >= 0) {
                prevPage();
              } else {
                nextPage();
              }
          } else if(mousewheelevt == "DOMMouseScroll") {
              if (event.originalEvent.detail >= 0) {
                nextPage();
              } else {
                prevPage();
              }
          }
        }
    });
4

1 に答える 1

3

Ok...

Honda サイトの関連コードはhttp://testdays.hondamoto.ch/js/script_2.jsにあります。divの上部を見つけてスクロールするためにいくつかの計算を行っているようです。さまざまなタイプのスクロール用のハンドラーがあります。

具体的には、移動はによって処理されますfunction navigation(target)

キービットはここにあります...

$('html,body').stop().animate({
        scrollTop: $(target).offset().top + newMargin
    }, 1000,'easeInOutExpo',function(){
        //Lots of "page"-specific stuff
    }
});

スクロールタイプのハンドラーがあります...

$('body').bind('touchstart', function(event) {
    //if(currentNav!=3){
        // jQuery clones events, but only with a limited number of properties for perf reasons. Need the original event to get 'touches'
        var e = event.originalEvent;
        scrollStartPos = e.touches[0].pageY;
    //}
});

//--Bind mouseWheel
$('*').bind('mousewheel', function(event, delta) {
    event.preventDefault();
    //trace('class : '+$(this).attr('class') + '   id : '+$(this).attr('id'));
    if(!busy && !lockScrollModel && !lockScrollMap){
        if(delta<0){
            nextPage();
        }else{
            prevPage();
        }
    }
});

navigate()この関数は、スクロールが完了すると設定解除されるフラグを設定することに注意してください。これは、スクロール中にすべての新しいスクロール イベントをbusy抑制する方法です。ページが既にスクロールしているときにスクロールの方向を変更してみてください。ユーザー入力も無視されていることに気付くでしょう。

于 2012-10-11T22:30:16.670 に答える