滚动功能多次点火而不是一次

时间:2016-01-16 00:22:25

标签: javascript jquery arrays scroll infinite-scroll

我正在尝试创建一个网站,在单个滚动操作时自动滚动到每个部分。这意味着代码必须检查页面是向上滚动还是向下滚动。我相信下面的代码解决了我的问题,但滚动动作在页面滚动时不止一次被触发。您将看到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;
});

2 个答案:

答案 0 :(得分:5)

滚动事件(以及resize事件)会在用户执行此操作时多次触发。为此,最佳做法是debounce。但是,我从来没有这样做过。相反,我使用全局布尔值来检查函数是否已被触发。

var scrolled = false;
page.on('scroll', function(){
    if(!scrolled){
        scrolled = true;
        //do stuff that should take a while...
        scrolled = false;
    };
});

答案 1 :(得分:3)

这对我有用!

 webView.setHorizontalScrollBarEnabled(false);
 webView.setOnTouchListener(new WebViewTouchListener());