我正在尝试创建一个网站,只需一次滚动操作即可自动滚动到每个部分。这意味着代码必须检查页面是向上滚动还是向下滚动。我相信下面的代码解决了我的问题,但是在页面滚动时滚动操作被多次触发。您将看到 if 语句中的第一个警报达到 5,而不是所需的 1。对于此事的任何帮助将不胜感激。
[注意] 我正在使用velocity.js 库滚动到容器内的每个部分。
var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];
var pageCur = 0;
var lastScrollTop = 0;
page.scroll(function(){
var st = $(this).scrollTop();
var pageNex = pageCur + 1;
if (st > lastScrollTop){
alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});
当用户执行此操作时,滚动事件(以及调整大小事件)会多次触发。为了帮助做到这一点,最佳实践是debounce。然而,我从来没有让它发挥作用。相反,我使用全局布尔值来检查函数是否已触发。
var scrolled = false;
page.on('scroll', function(){
if(!scrolled){
scrolled = true;
//do stuff that should take a while...
scrolled = false;
};
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)