水平滚轮滚动条问题

issue with horizontal wheel scroll

本文关键字：问题 滚动条 水平      更新时间：2023-09-26

我有一个模板，当用户使用鼠标滚轮时，模板水平滚动。

但它只是在铬中工作.

有没有办法在火狐和IE中水平滚动？

这是一个演示：http://jsfiddle.net/VhERd/

和 jquery ：

<script>
    $(function() {
       $("body").mousewheel(function(event, delta) {
          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>
    <script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

最后为我的英语;)

它需要处理html元素，而不是Firefox body元素。 

$("body, html").mousewheel....

我用过这个函数，它有点笨拙，但可以完成工作。

function scrollPage (e) {
    var delta = e.deltaX || e.wheelDelta,
        dir = (delta > 0) ? -90 : 90;
    if (window.addEventListener && !(window.chrome || window.opera)) {
        dir *= -1;
    }
    window.scrollBy(dir, 0);
    e.returnValue = false;
    if (e.preventDefault) {
        e.preventDefault();
    }
    return false;
}

并附加事件：

if (window.addEventListener && (!window.chrome && !window.opera)) {
    window.addEventListener('wheel', scrollPage, false); // IE9+, FF
} else if (window.chrome || window.opera) {
    window.addEventListener('mousewheel', scrollPage, false); // Chrome & Opera
} else {
    document.attachEvent('onmousewheel', scrollPage); // IE8-
}

jsFiddle的现场演示。

相关文章：