• 欢迎访问畅享前端

mousewheel滚轮事件

代码分享 lc_soul 3年前 (2017-10-26) 1487次浏览 0个评论 扫描二维码

原生

//Chrome 及 IE
document.body.onmousewheel = function (event) {
    event = event || window.event;
    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
    console.log(direction);
};
// Firefox
document.body.addEventListener("DOMMouseScroll", function(event) {
    var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
    console.log(direction);
});

jQuery

$(document).on("mousewheel DOMMouseScroll", function (e) {
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

畅享前端 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:mousewheel滚轮事件
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址