防止页面滚动功能建立队列

Question

我正在处理一个包含三个部分的页面（目前）。与其表现得像一个可滚动的页面，我希望该页面检测用户的滚动意图（通过抓取滚轮数据）并自动滚动到该部分。这样，页面的每一层都意味着滚动到位（覆盖整个窗口），而其他层不可见。

我遇到的问题是代码检测到滚轮事件并太快地触发滚动功能，从而构建了一个队列，该队列完全按照滚动定义的方向滚动页面。基本上，我无法让它停留在中间层。

我尝试通过以下方式限制滚动事件：http://remysharp.com/2010/07/21/throttling-function-calls/

我也尝试过实现 .stop() 和 .clearQueue() 方法。我以比我记得的更多的方式重写了这段代码，试图获得我想要的行为。 感谢您的帮助！

这是我的代码：

var tier = 1 //页面加载时的当前层

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ？ "DOMMouseScroll" : "鼠标滚轮"

$(window).bind(mousewheelevt, function(e){

var evt = window.event || e evt = evt.originalEvent ？ evt.originalEvent : evt;

var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //grabs data
if(delta < 0){ //if scroll down

    checkscroll();

}

else if(tier != 1) {    //prevents tier from changing if page can't scroll up

tier = tier - 1;

scroll();

}

});

函数滚动（）{

if(tier == 1) {

$('html,body').animate({scrollTop: $('#tier1').offset().top}, 1000);

}

else if(tier == 2) {

$('html,body').animate({scrollTop: $('#tier2').offset().top}, 1000);

}

else if(tier == 3) {

$('html,body').animate({scrollTop: $('#footer').offset().top}, 1000);

}

};

函数 checkscroll() {

if(tier != 3) {     //prevents tier from changing if page can't scroll down

tier = tier + 1;

scroll();

}

};

Answer 1

也许您可以计算 offset().top 的范围/面积（tier1.offset().top 到 tier1.offset().top+tier1.height = tier1Range, tier2.offset().top+tier2.height = tier2Range, ... )。如果窗口 offset().top 在活动 tierRange 范围内，请检查滚动。 如果为真，请不要滚动。如果为假，则进行滚动。