用滚动锁定检查“鼠标轮”事件方向
用滚动锁定检查“鼠标轮”事件方向
提问于 2015-12-28 18:42:53
我目前有一个光滑的滑块在我的页面顶部，应该改变幻灯片的滚动，并在某一点后，它应该回到正常的滚动行为。
我想要做的是最初锁定滚动(是的，我知道改变滚动行为对UX来说是一件可怕的事情，但这是一个直接来自客户端的强制性请求)，检查滚动事件被触发的次数，检查它是向上还是向下，然后相应地切换幻灯片。
我的代码当前如下所示：
$('body').on('DOMMouseScroll mousewheel', function(e) {
var viewportHeight = $(window).height(),
firstWaypoint = viewportHeight / 2,
secondWaypoint = viewportHeight,
thirdWaypoint = 3/2 * viewportHeight,
unlockPoint = viewportHeight * 2,
$slider = $('.home-hero__inner__text');
if (/* Y scroll position < thirdWaypoint lock scroll */) {
e.preventDefault();
} else if (/* If Y scroll position < secondWaypoint show first slide */) {
$slider.slick('slickGoTo', 0);
} else if (/* If Y scroll position > secondWaypoint show second slide */) {
$slider.slick('slickGoTo', 1);
} else if (/* If Y scroll position > thirdWaypoint show third slide */) {
$slider.slick('slickGoTo', 2);
} else {
// Unlock scroll
}
});问题是，由于我目前使用preventDefault()锁定滚动功能，所以不能再检查页面scrollTop()位置，因为它总是在顶部，返回0值。
是否有一种方法可以检查在正常行为上应该滚动多少像素，以及它是向上还是向下？因为，我需要跟踪假定的滚动位置，以触发if语句的每一步。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-12-28 18:59:52
您只需检查wheelDelta是正的还是负的
$(document).on('DOMMouseScroll mousewheel', function(e) {
var moved = e.originalEvent.wheelDelta || e.originalEvent.detail * -1 || 0;
if (moved > 0) {
// scrolled up
} else if (moved < 0) {
// scrolled down
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34498929
复制相关文章
相似问题
腾讯云开发者
