如何滚动水平只有鼠标滚轮上的div

Question

HTML标记：

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

CSS规则：

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

如何在鼠标滚轮http://jsfiddle.net/cxD55/

上滚动水平仅限BIG div

Answer 1

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

Answer 2

以下是解决方案：

<强> HTML

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

<强> CSS

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

<强> JS

(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。