我正在尝试构建一个网站,当用户向上或向下滚动页面时,该网站会自动滚动到每个部分。数周以来,我一直在努力解决这个问题,非常感谢对此事的任何帮助。我认为问题是因为事件处理程序是一个滚动事件,它会触发一个滚动函数,这会导致发生多个滚动。我已经阅读了很多讨论这个主题的文章,解决方案似乎是添加一个 setInterval 或 setTimeout 函数,但我都尝试过但仍然没有结果。
var page = $("#page_container");
var home = $("#home");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#bio");
var pages = [home, musicians, athletes, politics, bio];
var scrolled = false;
var pageCur = 0;
var lastScrollTop = 0;
page.scroll(function () {
scrolled = true;
});
var scrollTimeout = setInterval(function () {
if (scrolled == true) {
pageScroll();
}
else {
clearTimeout(scrollTimeout);
}
}, 3000);
function pageScroll() {
if (scrolled == true) {
scrolled = false;
var st = page.scrollTop();
var pageNex = pageCur + 1;
if (st > lastScrollTop) {
alert(pageNex);
pages[pageNex].velocity("scroll", {container: $("#page_container")});
} else {
alert(pageCur - 1);
pages[pageCur - 1].velocity("scroll", {container: $("#page_container")});
}
lastScrollTop = st;
pageCur = pageNex;
alert("1");
clearTimeout(scrollTimeout);
}
}
最佳答案
确实设置了超时:) 我认为您已接近解决方案。 试试这个小代码:
page.on('mousewheel', function (e) {
e.preventDefault();
if(Timeout)
return //if Timout == TRUE, then stop this function
Timeout = true //if Timout == FALSE, set TRUE and then execute
pageScroll(e) //scrollfunction to be called, Scrolling all the way!! YEAAH
setTimeout(function(){Timeout = false},250)//Set Timeout to False after 0.25s
});
function pageScroll(e) {
var st = page.scrollTop();
var pageNex = pageCur + 1;
if (st > lastScrollTop) {
alert(pageNex);
pages[pageNex].velocity("scroll", {container: $("#page_container")});
} else {
alert(pageCur - 1);
pages[pageCur - 1].velocity("scroll", {container: $("#page_container")});
}
lastScrollTop = st;
pageCur = pageNex;
alert("1");
e.preventDefault();
}
检查 This fiddle一个工作示例!
希望对您有所帮助:)
编辑:添加了一个可用的 fiddle !
关于javascript - Page Up/Down 事件上的动画滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35246659/