如何在鼠标滚轮上仅水平滚动 div答案

【问题标题】：How to scroll horizontal Only div on mouse wheel如何在鼠标滚轮上仅水平滚动 div
【发布时间】：2014-07-27 20:06:25
【问题描述】：

HTML 标记：

<div class="big">
  long width text
</div>

CSS 规则：

.big{
    height:200px;
    background: red;
}

如何在鼠标滚轮上水平滚动只有 BIG div http://jsfiddle.net/cxD55/

【问题讨论】：

How to do a horizontal scroll on mouse wheel scroll?
但这是整个页面，我只想滚动红色 div，因为如果我在页面中添加元素，它们也会滚动，但我只需要滚动一个 div
你在寻找类似This的东西

标签： javascript jquery html css

【解决方案1】：

设置overflow-x CSS 样式，但将overflow-y 样式设置为可见。

【讨论】：

啊，Deb 的链接表明我误解了这个问题，对吗？
不，我想在鼠标滚轮上滚动红色 div
啊，然后通过在html和body元素上设置overflow: hidden从页面中移除滚动条，然后在页面上捕获mouse wheel事件并设置scrollLeft属性的div。这可能行得通。

【解决方案2】：

解决办法如下：

HTML

<div class="big">
long text here
</div>

CSS

.big {
height: 200px;
overflow: hidden;
width:6000px;
}

(function () {
function scrollHorizontally(e) {
    e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    document.body.scrollLeft -= (delta * 40); // Multiplied by 40
    e.preventDefault();
}
if (window.addEventListener) {
    // IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);
    // Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
    // IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
}
})();

根据需要更改width。

【讨论】：

如果您分享演示会很好，因为我尝试了您的代码并且它不起作用。应该使用鼠标滚轮滚动。对吗？