能否使用Window.Onscroll方法来检测滚动方向?
function scrollFunc(e) {
if ( typeof scrollFunc.x == 'undefined' ) {
scrollFunc.x=window.pageXOffset;
scrollFunc.y=window.pageYOffset;
}
var diffX=scrollFunc.x-window.pageXOffset;
var diffY=scrollFunc.y-window.pageYOffset;
if( diffX<0 ) {
// Scroll right
} else if( diffX>0 ) {
// Scroll left
} else if( diffY<0 ) {
// Scroll down
} else if( diffY>0 ) {
// Scroll up
} else {
// First scroll event
}
scrollFunc.x=window.pageXOffset;
scrollFunc.y=window.pageYOffset;
}
window.onscroll=scrollFunc
var previous_scroll = $(window).scrollTop();
$(window).on('scroll', function() {
var scroll = $(window).scrollTop(),
scroll_change = scroll - previous_scroll;
previous_scroll = scroll;
$(window).trigger('custom_scroll', [scroll_change]);
});
scroll
,而是绑定到custom_scroll
:$(window).on('custom_scroll', function pos(e, scroll_change) {
console.log(scroll_change);
});
我在ie8中遇到了问题(虽然它对ie9、FF和Chrome是兼容的)- 所有的滚动似乎都被检测为水平的。
这里有一个修改过的脚本demo,它也适用于ie8,并且可能覆盖了更多的浏览器。
function scrollFunc(e) {
function getMethod() {
var x = 0, y = 0;
if ( typeof( window.pageYOffset ) == 'number' ) {
x = window.pageXOffset;
y = window.pageYOffset;
}
else if( document.body && (document.body.scrollLeft || document.body.scrollTop ) ) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
else if( document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return [x, y];
}
var xy = getMethod();
var xMethod = xy[0];
var yMethod = xy[1];
if ( typeof scrollFunc.x == 'undefined' ) {
scrollFunc.x = xMethod;
scrollFunc.y = yMethod;
}
var diffX = scrollFunc.x - xMethod;
var diffY = scrollFunc.y - yMethod;
if( diffX<0 ) {
// Scroll right
} else if( diffX>0 ) {
// Scroll left
} else if( diffY<0 ) {
// Scroll down
} else if( diffY>0 ) {
// Scroll up
} else {
// First scroll event
}
scrollFunc.x = xMethod;
scrollFunc.y = yMethod;
}
window.onscroll=scrollFunc