水平滚轮滚动问题答案

【问题标题】：issue with horizontal wheel scroll水平滚轮滚动问题
【发布时间】：2013-09-13 17:13:58
【问题描述】：

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

但它只能在 chrome 中工作。

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

和 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>

最后对不起我的英语;)

【问题讨论】：

在使用之前包含插件，而不是之后。
我知道 |我之前在主代码中使用过插件
developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… - mozilla 不支持mousewheel，请在此处阅读解决方案stackoverflow.com/questions/6735830/…
@maximkou，没看到添加支持的插件吗？
@epascarello，哦，对不起。我看到mousewheel 事件而不是插件。我今天很慢:)

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我用过这个功能，有点hacky，但是可以。

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-
}

A live demo at jsFiddle.

【讨论】：

@alireza 嗯...我试图将它添加到您的代码中，但没有得到它的工作。无论如何，使用simple layout。
@alireza 是的，当我尝试它时，这只是一个时间问题。这是带有您的代码的working fiddle。我想你也可以将它转换为 jQuery，主要问题是不同的事件名称（onwheel 和onmousewheel），方向也不一致。