滚动时将每个div视为“页面”
我有一个我正在构建的页面，我希望在滚动（向上或向下）页面时滚动到下一个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 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库 – 但它仍然做同样的事情。
最后，我在这里浏览了一下，发现：
仅在用户滚动时调用滚动，而不是在动画（）时调用滚动
但我无法实施该解决方案。 有没有人知道任何库或方法来使这个工作？
编辑：基于Basic答案的解决方案：
function nextPage() { 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的顶部然后滚动到它。 有不同类型的滚动处理程序。
具体来说，运动由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标志，当滚动完成时该标志未设置 - 这是在滚动期间它抑制所有新滚动事件的方式。 尝试在页面滚动时更改滚动方向，您也会注意到用户输入也被忽略。