我在找这样的东西:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
什么好主意吗?
我在找这样的东西:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
什么好主意吗?
当前回答
存储之前的滚动位置,然后查看新的滚动位置是否大于或小于该位置。
这里有一个避免任何全局变量的方法(在这里可以找到):
(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
其他回答
你可以确定鼠标的方向。
$(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');
}
});
为了忽略页面顶部和底部的任何snap / momentum / bounce back,这里是Josiah接受的答案的修改版本:
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;
});
您可以同时使用滚动和鼠标滚轮选项来跟踪上下移动一次。
$('body').bind('scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('moving down');
}
else {
console.log('moving up');
}
});
你也可以用window代替body。
var tempScrollTop, currentScrollTop = 0;
$(window).scroll(function(){
currentScrollTop = $("#div").scrollTop();
if (tempScrollTop > currentScrollTop ) {
// upscroll code
}
else if (tempScrollTop < currentScrollTop ){
// downscroll code
}
tempScrollTop = currentScrollTop;
}
或者使用鼠标滚轮扩展,见这里。
你可以这样做,而不必跟踪之前的滚动顶部,因为所有其他的例子都要求:
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('Scroll up');
}
else {
console.log('Scroll down');
}
});
我不是这方面的专家,所以请随意进一步研究,但当您使用$(element)时。滚动,被监听的事件是一个'滚动'事件。
但是如果您使用bind专门监听鼠标滚轮事件,则回调的事件参数的originalEvent属性包含不同的信息。其中一部分信息是wheelDelta。如果是正数,你就向上移动鼠标滚轮。如果是负的,鼠标滚轮就向下移动了。
我的猜测是鼠标滚轮事件将在鼠标滚轮转动时触发,即使页面没有滚动;在这种情况下,'scroll'事件可能不会被触发。如果需要,可以在回调的底部调用event. preventdefault()来阻止页面滚动,这样就可以将鼠标滚轮事件用于页面滚动之外的其他事情,比如某种类型的缩放功能。