javascript - 滚动时将每个 div 视为 "page"

Question

我有一个正在构建的页面，我希望当我滚动(向上或向下)页面时滚动到下一个 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 库 - 但它仍然做了同样的事情。

最后，我在这里稍微浏览了一下，发现:

Call Scroll only when user scrolls, not when animate()

但我无法实现该解决方案。有没有人知道任何库或方法可以使它正常工作？

编辑:基于 Basic 答案的解决方案:

  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();
              }
          }
        }
    });

Answer 1

好的...

本田网站的相关代码可以在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 标志，当滚动完成时该标志未设置 - 这就是它抑制所有 滚动期间的新滚动事件。尝试在页面已经滚动时更改滚动方向，您会发现用户输入也被忽略了。