Привязка к mousewheel
и DOMMouseScroll
закончилась очень хорошо для меня:
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
}
else {
// scroll down
}
});
Этот метод работает в IE9 +, Chrome 33 и Firefox 27.
Редактировать - март 2016 г.
Я решил вернуться к этой проблеме, так как это было давно. Страница MDN для события прокрутки имеет отличный способ получения позиции прокрутки, в которой используется requestAnimationFrame
, что весьма предпочтительно для моего предыдущего метода обнаружения. Я изменил их код, чтобы обеспечить лучшую совместимость в дополнение к направлению и положению прокрутки:
(function() {
var supportOffset = window.pageYOffset !== undefined,
lastKnownPos = 0,
ticking = false,
scrollDir,
currYPos;
function doSomething(scrollPos, scrollDir) {
// Your code goes here...
console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
}
window.addEventListener('wheel', function(e) {
currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
lastKnownPos = currYPos;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownPos, scrollDir);
ticking = false;
});
}
ticking = true;
});
})();
Смотрите ручку
Vanilla JS Scroll Tracking Джесси Дюпюи (
@ blindside85 ) на
CodePen .
Этот код в настоящее время работает в Chrome v50, Firefox v44, Safari v9, and IE9+
Ссылки: