将每个div处理为“页面”滚动时 [英] Treating each div as a "page" when scrolling
问题描述
您会注意到，当您向下滚动时，会自动将您移动到下一个div
我试过的是：
-
jQuery .scroll事件结合：
function updatePosition（）{
if（canScroll）{
var页面名;
canScroll = false;
var st = $（window）.scrollTop（）;
if（st> lastScrollTop）{
// downscroll code
if（pageNumber< 7）{
pageNumber ++;
}
pageName ='＃'+ getPageToScrollTo（）。
$（'body'）。animate（{scrollTop：$（pageName）.offset（）。top}，2000，function（）{
canScroll = true;
}）;
} else {
// upscroll code
if（pageNumber> 0）{
pageNumber--;
}
pageName ='＃'+ getPageToScrollTo（）。
$（'body'）。animate（{scrollTop：$（pageName）.offset（）。top}，2000，function（）{
canScroll = true;
}）;
}
lastScrollTop = st;
}
}
但是当页面滚动（动画）时，滚动事件被调用，当用户滚动时。我只需要在用户滚动时调用它。
然后我添加了：
code> var throttled = _.throttle（updatePosition，3000）;
$（document）.scroll（throttled）;
从Underscore.js库 - 但它仍然是一样的。
最后，我在这里浏览了一下，发现：
但是我无法实现该解决方案。有没有人知道任何图书馆或方法来实现这个工作？
编辑：
基于Basic的答案的解决方案：
function nextPage（）{
canScroll = false;
if（pageNumber< 7）{
pageNumber ++;
}
pageName = getPageToScrollTo（）;
$（'html，body'）。stop（）。animate（{scrollTop：$（pageName）.offset（）。top}，1000，function（）{
canScroll = true;
}）;
}
函数prevPage（）{
canScroll = false;
if（pageNumber> 0）{
pageNumber--;
}
pageName = getPageToScrollTo（）;
$（'html，body'）。stop（）。animate（{scrollTop：$（pageName）.offset（）。top}，1000，function（）{
canScroll = true;
}）;
}
// - 绑定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（）;
}
}
}
}）;
Ok ...
本田网站的相关代码可以在 http：// testdays.hondamoto.ch/js/script_2.js 。它似乎正在做一些计算，以找到顶部的div然后滚动到它。有不同类型滚动的处理程序。
具体来说，运动由功能导航（目标） / p>
关键位在这里...
$（'html ，body'）。stop（）。animate（{
scrollTop：$（target）.offset（）。top + newMargin
}，1000，'easeInOutExpo'，function（）{
//很多页面特定的东西
}
}）;
有滚动类型的处理程序...
$ pre $（$ body $）$（$）$（$）$（$） / jQuery克隆事件，但只有有限数量的属性为perf原因。需要原始事件以获取'触摸'
var e = event.originalEvent;
scrollStartPos = e.touches [0]。 pageY;
//}
}）;
// - 绑定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 标志，当滚动完成时，该标志是未设置的 - 这是在滚动期间如何抑制新的滚动事件。尝试在页面已经滚动时更改滚动方向，并且您会注意到用户输入也被忽略。
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:
You will notice that when you scroll down, it automatically moves you to the next "div".
What I've tried:
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.
Then I added:
var throttled = _.throttle(updatePosition, 3000);
$(document).scroll(throttled);
From the Underscore.js library - but it still did the same.
Finally, I browsed here a bit and found:
Call Scroll only when user scrolls, not when animate()
But I was unable to implement that solution. Is there anyone that knows of any libraries or methods to get this working?
EDIT: 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();
}
}
}
});
Ok...
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.
Specifically, the movement is handled by function navigation(target)
the key bits is here...
$('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();
}
}
});
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屋！
