将每个 div 视为一个“页面"滚动时 [英] Treating each div as a "page" when scrolling

问题描述

我有一个正在构建的页面，我想让它在我滚动(向上或向下)时滚动到下一个 div(每个 div 是窗口高度的 100%).并在那里固定"，直到您再次滚动.我正在尝试完成的一个例子可以在这里看到:

I have a page that I'm building and I would like to make it that when I scroll (up or down) the page scrolls to the next div (each div is 100% the height of the window). And gets "fixed" there until you scroll again. An example of what I'm trying to accomplish can be seen here:

http://testdays.hondamoto.ch/

您会注意到，当您向下滚动时，它会自动将您移动到下一个div".

You will notice that when you scroll down, it automatically moves you to the next "div".

我尝试过的:

• 结合使用 jQuery .scroll 事件:

• Using the jQuery .scroll event combined with:

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

但是滚动事件在页面滚动(动画)和用户滚动时被调用.我只需要在用户滚动时调用它.

But the scroll event was getting called when the page was scrolling (animating), AND when the user scrolled. I only need it to be called when the user scrolls.

然后我补充说:

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

$(document).scroll(throttled);

来自 Underscore.js 库 - 但它仍然做了同样的事情.

From the Underscore.js library - but it still did the same.

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

Finally, I browsed here a bit and found:

仅在用户滚动时调用滚动，而不是在动画时调用()

但我无法实施该解决方案.有没有人知道任何库或方法可以让这个工作?

But I was unable to implement that solution. Is there anyone that knows of any libraries or methods to get this working?

基于基本答案的解决方案:

Solution based on Basic's answer:

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

推荐答案

好的...

本田网站的相关代码可以在http://testdays.hondamoto.ch/js/script_2.js.它似乎在做一些计算来定位 div 的顶部，然后滚动到它.有用于不同类型滚动的处理程序.

The relevant code for the Honda site can be found in http://testdays.hondamoto.ch/js/script_2.js. It seems to be doing some calculations to locate the top of the div then scroll to it. There are handlers for different types of scrolling.

具体来说，移动由function navigation(target)

关键位在这里...

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

滚动类型有处理程序...

There are handlers for the scroll types...

$('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 标志，该标志在滚动完成时未设置 - 这就是它抑制 all 滚动期间的新滚动事件.尝试在页面已经滚动时更改滚动方向，您会注意到用户输入也被忽略了.

You'll note that the navigate() function sets a busy flag which is unset when scrolling completes - which is how it suppresses all new scroll events during a scroll. Try changing the direction of scroll while the page is already scrolling and you'll notice user input is being ignored too.

这篇关于将每个 div 视为一个“页面"滚动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！