之前看到一个网页，有鼠标滚轮滚动时实现了横向的滚动效果，觉得有意思，就试了试，本来想挺简单的一个功能，但是兼容各浏览器就要费些功夫了
HTML和CSS代码
img{
height:200px;
}
#scrollDiv{
display: inline-block;
float: left;
overflow-x: auto;
white-space:nowrap;
}
js代码
在chrome 中 设置 document.documentElement.scrollLeft 都会为0，但是可以设置 document.body.scrollLeft,因此 需要进行浏览器判断，同时在FireFox下，没有mousewheel事件，但是FireFox增加了DOMMouseScroll事件；
var scrollDiv = document.getElementById("scrollDiv");
var element = document.documentElement;
if(navigator.userAgent.indexOf("Chrome")>0){
element = document.body;
}
document.addEventListener('DOMMouseScroll',handler,false)
document.addEventListener('mousewheel',handler,false)
function handler(event){
var detail = event.wheelDelta || event.detail;
var moveForwardStep = 1;
var moveBackStep = -1;
var step = 0;
if(detail > 0){
step = moveForwardStep*100;
}else{
step = moveBackStep * 100;
}
element.scrollLeft += step;
}
document.body 和 document.documentElement的区别
document.body 是DOM对象里的body子节点，即
标签；
document.documentElement 是整个节点树的根节点root，即 标签；