Javascript 水平滚轮滚动问题

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

但它只是在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>

$（函数（）{
$（“body”）.mousewheel（函数（事件，增量）{
这个.scrollLeft-=（增量*30）；
event.preventDefault（）；
});
});

---

最后，我要学习英语；）

我使用过这个函数，它有点粗糙，但可以完成这项工作

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

---

.

我使用过这个函数，它有点粗糙，但可以完成任务

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

---

.

对于Firefox，它需要去掉

html

元素，而不是

body

元素

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

---

它需要去掉

html

元素，而不是Firefox的

body

元素

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

---

在使用之前包含插件，而不是之后。我知道|我在我的主代码中使用过插件-mozilla不受支持

mousewheel

，请在这里阅读解决方案@maximkou，你没有看到添加支持的插件吗？@epascarello，哦，对不起。我看到的是

mouseweel

事件，而不是插件。我今天很慢：）在使用之前包含插件，而不是之后。我知道|我在我的主代码中使用过插件-mozilla不受支持

mousewheel

，请在这里阅读解决方案@maximkou，你没有看到添加支持的插件吗？@epascarello，哦，对不起。我看到的是

mouseweel

事件，而不是插件。我今天很慢：）@alireza-Hmm。。。我试图将其添加到您的代码中，但没有成功。不管怎么说，它是和一个机器人一起工作的。@alireza是的，当我尝试它时，它只是一个胆小的问题。这是一个与你的代码。我想您也可以将其转换为jQuery，主要问题是事件名称不同（

onwheel

和

onmouseheel

），而且方向不一致。@alireza-Hmm。。。我试图将其添加到您的代码中，但没有成功。不管怎么说，它是和一个机器人一起工作的。@alireza是的，当我尝试它时，它只是一个胆小的问题。这是一个与你的代码。我想您也可以将其转换为jQuery，主要问题是事件名称不同（

onwheel

和

onmouseheel

），而且方向也不一致。