如何确定 jQuery 滚动事件的方向？
Posted
技术标签:
【中文标题】如何确定 jQuery 滚动事件的方向？【英文标题】：How can I determine the direction of a jQuery scroll event? 【发布时间】：2011-05-18 15:08:37 【问题描述】：我正在寻找类似的东西：
$(window).scroll(function(event)
if (/* magic code*/ )
// upscroll code
else
// downscroll code
);
有什么想法吗？
【问题讨论】：
弹性滚动有问题的朋友请使用这个答案***.com/questions/7154967/jquery-detect-scrolldown 目前最容易使用wheel事件：***.com/a/33334461/3168107。
【参考方案1】：
检查当前scrollTop 与以前的scrollTop
var lastScrollTop = 0;
$(window).scroll(function(event)
var st = $(this).scrollTop();
if (st > lastScrollTop)
// downscroll code
else
// upscroll code
lastScrollTop = st;
);
【讨论】：
有什么方法可以对此设置敏感度？ 我在thiscodepen 做了一个例子。由于受欢迎程度，也许我会用 jQuery 插件更新这个答案。 如果您回到具有此代码的上一页，您是否尝试过此操作？如果您向下滚动页面，请说 500PX。转到另一个页面，然后返回初始页面。一些浏览器会保持滚动位置，并将您带回页面。你会在 0 处有一个起始lastScrollTop 还是会被正确初始化？？
@TCHdvlp - 最坏的情况是 first 滚动事件将更新变量，而 second 事件将是准确的（.. 它只会后退导航后向上滚动的事项）。这可以通过在浏览器更新页面加载时的滚动位置后设置var lastScrollTop = $(window).scrollTop() 来解决。
对此的更新：请注意某些浏览器，特别是 Windows 8 上的 IE 11，可以触发基于亚像素的滚动事件（平滑滚动）。但是因为它将 scrollTop 报告为整数，所以您之前的滚动值可能与当前值相同。【参考方案2】：
您可以这样做，而无需跟踪前一个滚动顶部，因为所有其他示例都需要：
$(window).bind('mousewheel', function(event)
if (event.originalEvent.wheelDelta >= 0)
console.log('Scroll up');
else
console.log('Scroll down');
);
我不是这方面的专家，因此请随意进一步研究，但似乎当您使用$(element).scroll 时，正在侦听的事件是“滚动”事件。
但是，如果您专门使用绑定来监听mousewheel 事件，则回调的事件参数的originalEvent 属性包含不同的信息。该信息的一部分是wheelDelta。如果是肯定的，则您向上移动了鼠标滚轮。如果它是负数，则向下移动鼠标滚轮。
我的猜测是mousewheel 事件会在鼠标滚轮转动时触发，即使页面没有滚动；可能不会触发“滚动”事件的情况。如果需要，您可以在回调底部调用 event.preventDefault() 以防止页面滚动，这样您就可以将鼠标滚轮事件用于页面滚动以外的其他操作，例如某种类型的缩放功能。
【讨论】：
不错，但遗憾的是唯一的 Firefox 不支持它developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/…（在 FF v15 中测试）。 :C 这对我很有用：我需要检测滚动，即使页面本身实际上并没有滚动，所以scrollTop 没有更新。事实上，$(window).scroll() 根本没有触发。
很高兴你不需要旧的状态。然而，这种技术不适用于手机或平板电脑，因为它们没有鼠标滚轮！
如果我用键盘滚动，这种方法将不起作用。对于缩放之类的东西，这绝对是一种有趣的方法，但我认为它不能解决滚动方向问题。
$("html, body").bind('mousewheel DOMMouseScroll onmousewheel touchmove scroll': function(e) //... );在检测所有浏览器滚动数据方面为我工作【参考方案3】：
存储上一个滚动位置，然后查看新的滚动位置是否大于或小于该位置。
这是一种避免任何全局变量的方法 (fiddle available here)：
(function ()
var previousScroll = 0;
$(window).scroll(function()
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll)
alert('down');
else
alert('up');
previousScroll = currentScroll;
);
()); //run this anonymous function immediately
【讨论】：
【参考方案4】：现有解决方案
此帖子和other answer 可能有 3 个解决方案。
解决方案 1
var lastScrollTop = 0;
$(window).on('scroll', function()
st = $(this).scrollTop();
if(st < lastScrollTop)
console.log('up 1');
else
console.log('down 1');
lastScrollTop = st;
);
解决方案 2
$('body').on('DOMMouseScroll', function(e)
if(e.originalEvent.detail < 0)
console.log('up 2');
else
console.log('down 2');
);
解决方案 3
$('body').on('mousewheel', function(e)
if(e.originalEvent.wheelDelta > 0)
console.log('up 3');
else
console.log('down 3');
);
多浏览器测试
我无法在 Safari 上测试它
铬 42 (Win 7)
解决方案 1 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件 解决方案 2 向上：不工作 关闭：不工作 解决方案 3 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件火狐 37 (Win 7)
解决方案 1 向上：每 1 个滚动条 20 个事件 向下：每 1 个滚动 20 个事件 解决方案 2 向上：不工作 向下：每 1 个滚动 1 个事件 解决方案 3 向上：不工作 关闭：不工作IE 11 (Win 8)
解决方案 1 向上：每 1 次滚动 10 个事件（副作用：最后发生向下滚动） 向下：每 1 个滚动条 10 个事件 解决方案 2 向上：不工作 关闭：不工作 解决方案 3 向上：不工作 向下：每 1 个滚动 1 个事件IE 10 (Win 7)
解决方案 1 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件 解决方案 2 向上：不工作 关闭：不工作 解决方案 3 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件IE 9 (Win 7)
解决方案 1 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件 解决方案 2 向上：不工作 关闭：不工作 解决方案 3 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件IE 8 (Win 7)
解决方案 1 向上：每 1 次滚动 2 个事件（副作用：最后发生向下滚动） 向下：每 1 个滚动 2~4 个事件 解决方案 2 向上：不工作 关闭：不工作 解决方案 3 向上：每 1 次滚动 1 个事件 向下：每 1 个滚动 1 个事件组合解决方案
我检查了 IE 11 和 IE 8 的副作用来自
if else语句。因此，我将其替换为if else if语句，如下所示。
在多浏览器测试中，我决定将Solution 3用于普通浏览器，Solution 1用于firefox和IE 11。
我推荐 this answer 检测 IE 11。
// Detect IE version
var iev=0;
var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
var trident = !!navigator.userAgent.match(/Trident\/7.0/);
var rv=navigator.userAgent.indexOf("rv:11.0");
if (ieold) iev=new Number(RegExp.$1);
if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
if (trident&&rv!=-1) iev=11;
// Firefox or IE 11
if(typeof InstallTrigger !== 'undefined' || iev == 11)
var lastScrollTop = 0;
$(window).on('scroll', function()
st = $(this).scrollTop();
if(st < lastScrollTop)
console.log('Up');
else if(st > lastScrollTop)
console.log('Down');
lastScrollTop = st;
);
// Other browsers
else
$('body').on('mousewheel', function(e)
if(e.originalEvent.wheelDelta > 0)
console.log('Up');
else if(e.originalEvent.wheelDelta < 0)
console.log('Down');
);
【讨论】：
如果有人可以添加Safari browser的结果，那将有助于补充解决方案。
糟糕！我发现Mobile Chrome和android默认浏览器只被方案1覆盖，所以方案1和方案3一起使用来覆盖各种浏览器会更好。
如果设计是固定布局设计，将无法工作。如果要在静态无滚动网站上检测滚动方向，Firefox 和 IE11 将无法工作
我发现当我使用它时，它会使用 chrome 中的“其他浏览器”，当您希望同时检测鼠标滚轮和滚动条的滚动时，这并没有多大用处。 .scroll 将检测 chrome 中的两种滚动类型。【参考方案5】：
我知道已经有一个公认的答案，但想发布我正在使用的内容，以防它可以帮助任何人。我通过鼠标滚轮事件获得了像cliphex 这样的方向，但支持 Firefox。如果您正在执行诸如锁定滚动之类的操作并且无法获得当前滚动顶部，这样做很有用。
查看实时版本here。
$(window).on('mousewheel DOMMouseScroll', function (e)
var direction = (function ()
var delta = (e.type === 'DOMMouseScroll' ?
e.originalEvent.detail * -40 :
e.originalEvent.wheelDelta);
return delta > 0 ? 0 : 1;
());
if(direction === 1)
// scroll down
if(direction === 0)
// scroll up
);
【讨论】：
@EtienneMartin 上面的代码依赖于 jQuery，如果这是导致您的错误的原因。请查看随附的小提琴以查看它的工作原理。【参考方案6】：滚动事件
scroll event 在 FF 中的行为很奇怪（由于平滑滚动，它被触发了很多次）但它可以工作。
注意：scroll 事件实际上在使用光标键或鼠标滚轮拖动滚动条时被触发。
//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css(
padding: "5px 7px",
background: "#e9e9e9",
position: "fixed",
bottom: "15px",
left: "35px"
);
//binds the "scroll" event
$(window).scroll(function (e)
var target = e.currentTarget,
self = $(target),
scrollTop = window.pageYOffset || target.scrollTop,
lastScrollTop = self.data("lastScrollTop") || 0,
scrollHeight = target.scrollHeight || document.body.scrollHeight,
scrollText = "";
if (scrollTop > lastScrollTop)
scrollText = "<b>scroll down</b>";
else
scrollText = "<b>scroll up</b>";
$("#test").html(scrollText +
"<br>innerHeight: " + self.innerHeight() +
"<br>scrollHeight: " + scrollHeight +
"<br>scrollTop: " + scrollTop +
"<br>lastScrollTop: " + lastScrollTop);
if (scrollHeight - scrollTop === self.innerHeight())
console.log("► End of scroll");
//saves the current scrollTop
self.data("lastScrollTop", scrollTop);
);
车轮事件
您也可以看看 MDN，它提供了有关 Wheel Event 的大量信息。
注意：滚轮事件仅在使用鼠标滚轮时触发；光标键和拖动滚动条不会触发事件。
我阅读了文档和示例：Listening to this event across browser 在对 FF、IE、chrome、safari 进行了一些测试后，我得到了这个 sn-p：
//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css(
padding: "5px 7px",
background: "#e9e9e9",
position: "fixed",
bottom: "15px",
left: "15px"
);
//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e)
var evt = e.originalEvent || e;
//this is what really matters
var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
scrollText = "";
if (deltaY > 0)
scrollText = "<b>scroll down</b>";
else
scrollText = "<b>scroll up</b>";
//console.log("Event: ", evt);
$("#test").html(scrollText +
"<br>clientHeight: " + this.clientHeight +
"<br>scrollHeight: " + this.scrollHeight +
"<br>scrollTop: " + scrollTop +
"<br>deltaY: " + deltaY);
);
【讨论】：
我有一个固定的面板视图，它禁用了实际的滚动条，所以我需要检测鼠标滚轮的方向。您的鼠标滚轮解决方案可以完美地跨浏览器运行，非常感谢！【参考方案7】：如果您只想知道使用指针设备（鼠标或触控板）向上还是向下滚动，可以使用wheel 事件的deltaY 属性。
$('.container').on('wheel', function(event)
if (event.originalEvent.deltaY > 0)
$('.result').append('Scrolled down!<br>');
else
$('.result').append('Scrolled up!<br>');
);.container
height: 200px;
width: 400px;
margin: 20px;
border: 1px solid black;
overflow-y: auto;
.content
height: 300px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
Scroll me!
</div>
</div>
<div class="result">
<p>Action:</p>
</div>【讨论】：
这个链接说不依赖deltaY developer.mozilla.org/en-US/docs/Web/Events/wheel【参考方案8】：var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function()
currentScrollTop = $("#div").scrollTop();
if (tempScrollTop > currentScrollTop )
// upscroll code
else if (tempScrollTop < currentScrollTop )
// downscroll code
tempScrollTop = currentScrollTop;
或使用mousewheel extension，见here。
【讨论】：
【参考方案9】：我在这里看到了很多版本的好答案，但似乎有些人遇到了跨浏览器问题，所以这是我的解决方案。
我已经成功地使用它来检测 FF、IE 和 Chrome 中的方向......我没有在 safari 中测试它，因为我通常使用 Windows。
$("html, body").bind('mousewheel DOMMouseScroll onmousewheel touchmove scroll':
function(e)
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
//Determine Direction
if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0)
//Up
alert("up");
else if (e.originalEvent.detail && e.originalEvent.detail <= 0)
//Up
alert("up");
else
//Down
alert("down");
);
请记住，我还使用它来停止任何滚动，因此如果您希望滚动仍然发生，您必须删除 e.preventDefault(); e.stopPropagation();
【讨论】：
总是在 android GS5 上返回 这很棒！我对 IE 上的最高投票答案有疑问。这没有那个问题！来自我的 +1。【参考方案10】：要忽略页面顶部和底部的任何快照/动量/反弹，这里是 Josiah's accepted answer 的修改版本：
var prevScrollTop = 0;
$(window).scroll(function(event)
var scrollTop = $(this).scrollTop();
if ( scrollTop < 0 )
scrollTop = 0;
if ( scrollTop > $('body').height() - $(window).height() )
scrollTop = $('body').height() - $(window).height();
if (scrollTop >= prevScrollTop && scrollTop)
// scrolling down
else
// scrolling up
prevScrollTop = scrollTop;
);
【讨论】：
【参考方案11】：您可以确定鼠标的方向。
$(window).on('mousewheel DOMMouseScroll', function (e)
var delta = e.originalEvent.wheelDelta ?
e.originalEvent.wheelDelta : -e.originalEvent.detail;
if (delta >= 0)
console.log('scroll up');
else
console.log('scroll down');
);
【讨论】：
【参考方案12】：使用它来查找滚动方向。这只是为了找到垂直滚动的方向。支持所有跨浏览器。
var scrollableElement = document.getElementById('scrollableElement');
scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);
function findScrollDirectionOtherBrowsers(event)
var delta;
if (event.wheelDelta)
delta = event.wheelDelta;
else
delta = -1 * event.deltaY;
if (delta < 0)
console.log("DOWN");
else if (delta > 0)
console.log("UP");
Example
【讨论】：
【参考方案13】：此代码在 IE、Firefox、Opera 和 Chrome 上运行良好：
$(window).bind('wheel mousewheel', function(event)
if (event.originalEvent.deltaY >= 0)
console.log('Scroll down');
else
console.log('Scroll up');
);
'wheel mousewheel' 和属性 deltaY 必须在 bind() 函数中使用。
记住：出于安全原因，您的用户必须更新他们的系统和浏览器。 2018年，“我有IE 7”的借口是一派胡言。我们必须教育用户。
祝你有美好的一天:)
【讨论】：
我试过你的代码，但它是另一种方式。向下滚动时触发第一个，向上滚动时触发第二个。 嗨 :) 谢谢 AlexioVay。我编辑了我的代码（也是时间！）^^。当然“console.log('.......')”这只是我们可以做的一个例子。【参考方案14】：保持超级简单：
jQuery事件监听方式：
$(window).on('wheel', function()
whichDirection(event);
);
Vanilla JavaScript 事件监听方式：
if(window.addEventListener)
addEventListener('wheel', whichDirection, false);
else if (window.attachEvent)
attachEvent('wheel', whichDirection, false);
功能保持不变：
function whichDirection(event)
console.log(event + ' WheelEvent has all kinds of good stuff to work with');
var scrollDirection = event.deltaY;
if(scrollDirection === 1)
console.log('meet me at the club, going down', scrollDirection);
else if(scrollDirection === -1)
console.log('Going up, on a tuesday', scrollDirection);
我在上面写了一篇更深入的帖子here
【讨论】：
使用jquery版本需要jquery-wheel吗？ 这个@HastigZusammenstellen不需要jquery-wheel【参考方案15】：您可以同时使用滚动和鼠标滚轮选项来同时跟踪上下移动。
$('body').bind('scroll mousewheel', function(event)
if (event.originalEvent.wheelDelta >= 0)
console.log('moving down');
else
console.log('moving up');
);
您也可以将“body”替换为 (window)。
【讨论】：
在 Chrome 中似乎可以正常工作，但在 FF（55.0.2，Ubuntu）中却不行【参考方案16】：2021-04-07 更新
Bobort 在评论中（谢谢！）指向wheel documentation 中添加的新注释：
不要将滚轮事件与滚动事件混淆。 Wheel 事件的默认操作是特定于实现的，并且不一定调度滚动事件。即使是这样，wheel 事件中的 delta* 值也不一定反映内容的滚动方向。因此，不要依赖 wheel 事件的 delta* 属性来获取滚动方向。而是在滚动事件中检测目标的scrollLeft和scrollTop的值变化。
但是，文档中给出的示例使用 delta 进行缩放，这意味着向上滚动以缩小，向下滚动以放大。
下面的代码适用于我在不同的浏览器中检测方向，但考虑到这一点，使用它需要您自担风险。
原答案
由于 v3 上的bind has been deprecated（“被on 取代”）和wheel is now supported，忘记wheelDelta：
$(window).on('wheel', function(e)
if (e.originalEvent.deltaY > 0)
console.log('down');
else if (e.originalEvent.deltaY < 0)
console.log('up');
else if (e.originalEvent.deltaX > 0)
console.log('right');
else if (e.originalEvent.deltaX < 0)
console.log('left');
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
????????????????<br/>
????????????????<br/>
????????????????<br/>
????????????????<br/>
????????????????<br/>
????????????????<br/>
</h1>wheel 事件的Browser Compatibility on MDN's (2019-03-18)：
【讨论】：
上面的代码会产生两个控制台日志，使用下面的代码来完全分离出上/下/左/右：if(e.originalEvent.deltaY > 0) console.log('down'); else if(e.originalEvent.deltaY < 0) console.log('up'); else if(e.originalEvent.deltaX > 0) console.log('right'); else if(e.originalEvent.deltaX < 0) console.log('left');
供移动使用touchmove事件代替。
我检查了文档，在检测滚动方向时，它明确指出以下内容：“不要依赖滚轮事件的delta* 属性来获取滚动方向。相反，检测值滚动事件中目标的scrollLeft 和scrollTop 的变化。"
感谢@Bobort，我根据该注释调整了我的答案。
@DonWilson 谢谢！刚刚用您的建议更新了答案。【参考方案17】：
在滚动元素的.data () 中存储一个增量，然后您将能够测试滚动到达顶部的次数。
【讨论】：
【参考方案18】：为什么没有人在滚动时使用jQuery 返回的event 对象？
$window.on('scroll', function (event)
console.group('Scroll');
console.info('Scroll event:', event);
console.info('Position:', this.pageYOffset);
console.info('Direction:', event.originalEvent.dir); // Here is the direction
console.groupEnd();
);
我正在使用chromium，但我没有检查其他浏览器是否具有dir 属性。
【讨论】：
Chrome 86.0.4240.111 中没有“dir”属性【参考方案19】：你也可以用这个
$(document).ready(function()
var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function()
Get_page_scroll_direction();
);
function Get_page_scroll_direction()
var running_scroll_position = $(window).scrollTop();
if(running_scroll_position > currentscroll_position)
$('.direction_value').text('Scrolling Down Scripts');
else
$('.direction_value').text('Scrolling Up Scripts');
currentscroll_position = running_scroll_position;
);.direction_value
position: fixed;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
z-index: 99;
left: 0;
top: 0;
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>【讨论】：
【参考方案20】：在元素的.data() 中，您可以存储 JSON 和测试值以启动事件
top : 1,
first_top_event: function() ...,
second_top_event: function() ...,
third_top_event: function() ...,
scroll_down_event1: function() ...,
scroll_down_event2: function() ...
【讨论】：
【参考方案21】：当用户滚动离开页面顶部以及何时返回顶部时，这是一种简单易行的检测。
$(window).scroll(function()
if($(window).scrollTop() > 0)
// User has scrolled
else
// User at top of page
);
【讨论】：
【参考方案22】：这是在用户结束滚动时检测方向的最佳解决方案。
var currentScrollTop = 0 ;
$(window).bind('scroll', function ()
scrollTop = $(this).scrollTop();
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function()
if(scrollTop > currentScrollTop)
// downscroll code
$('.mfb-component--bl').addClass('mfbHide');
else
// upscroll code
$('.mfb-component--bl').removeClass('mfbHide');
currentScrollTop = scrollTop;
, 250));
);
【讨论】：
【参考方案23】：你应该试试这个
var scrl
$(window).scroll(function()
if($(window).scrollTop() < scrl)
//some code while previous scroll
else
if($(window).scrollTop() > 200)
//scroll while downward
else//scroll while downward after some specific height
scrl = $(window).scrollTop();
);
【讨论】：
【参考方案24】：我在弹性滚动（滚动弹跳、橡皮筋）方面遇到了问题。 如果靠近页面顶部，则忽略向下滚动事件对我有用。
var position = $(window).scrollTop();
$(window).scroll(function ()
var scroll = $(window).scrollTop();
var downScroll = scroll > position;
var closeToTop = -120 < scroll && scroll < 120;
if (downScroll && !closeToTop)
// scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
$('.top-container').slideUp('fast');
$('.main-header').addClass('padding-top');
else
// scrolled up
$('.top-container').slideDown('fast');
$('.main-header').removeClass('padding-top');
position = scroll;
);
【讨论】：
120 是什么意思？也许使用 const 来更好地解释 120 是什么。【参考方案25】：这适用于所有电脑或手机浏览器，并扩展了热门答案。可以构建一个更复杂的事件对象 window["scroll_evt"] 然后在 handleScroll() 函数中调用它。如果某个延迟已经过去或某个增量通过以消除一些不需要的触发，则此触发 2 个并发条件。
window["scroll_evt"]="delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10;
$(window).scroll(function()
var currentScroll = $(this).scrollTop();
var currentTime = Date.now();
var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
if(boolRun)
window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
window["scroll_evt"]["pos"] = currentScroll;
window["scroll_evt"]["time"] = currentTime;
handleScroll();
);
function handleScroll()
event.stopPropagation();
//alert(window["scroll_evt"]["direction"]);
console.log(window["scroll_evt"]);
【讨论】：
以上是关于如何确定 jQuery 滚动事件的方向？的主要内容，如果未能解决你的问题，请参考以下文章