Question

我正在处理包含三个部分的页面（暂时）。我希望页面能够检测用户意图滚动（通过抓取滚轮数据）并自动滚动到该部分，而不是像滚动页面那样。以这种方式，页面的每一层意味着滚动到位（覆盖整个窗口）而其他层不可见。

我遇到的问题是代码检测到滚轮事件并过快地触发滚动功能，构建一个完全按滚动定义的方向滚动页面的队列。基本上，我不能让它坚持中间层。

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

我也尝试过实现.stop（）和.clearQueue（）方法。我用更多的方式重写了这段代码，而不是记得试图获得我想要的行为。谢谢你的帮助！

这是我的代码：

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

var mousewheelevt =（/Firefox/i.test(navigator.userAgent））？＆＃34; DOMMouseScroll＆＃34; ：＆＃34; mousewheel＆＃34;

$（window）.bind（mousewheelevt，function（e）{

var evt = window.event || Ë 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();

}

}）;

function 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);

}

};

function 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 to tier1.offset（）。top + tier1.height = tier1Range，tier2.offset（）。top + tier2.height = tier2Range，...）。如果窗口偏移（），则检查滚动.top位于活动tierRange的范围内。如果为true，请不要滚动。如果为false，请执行滚动操作。

从构建队列中阻止页面滚动功能

1 个答案: