我正在尝试构建一个网站,在用户向上或向下滚动页面时自动滚动到每个部分。我已经尝试解决这个问题几周了,希望能得到任何有关此事的帮助。我认为问题在于事件处理程序是一个滚动事件,它触发了一个滚动函数,这导致了多次滚动。我已经阅读了许多讨论这个主题的文章,解决方案似乎是添加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);
}
}