[英]How to scroll horizontal Only div on mouse wheel
HTML标记:
<div class="big">
long width text
</div>
CSS规则:
.big{
height:200px;
background: red;
}
如何在鼠标滚轮上水平滚动只有BIG div http://jsfiddle.net/cxD55/
设置overflow-x CSS样式,但将overflow-y样式设置为可见。
解决方法如下:
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
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.