之前看到一個網頁，有鼠標滾輪滾動時實現了橫向的滾動效果，覺得有意思，就試了試，本來想挺簡單的一個功能，但是兼容各瀏覽器就要費些功夫了
HTML和CSS代碼
<style type="text/css">
img{
height:200px;
}
#scrollDiv{
display: inline-block;
float: left;
overflow-x: auto;
white-space:nowrap;
}
</style>
<div id = "scrollDiv" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t1948/155/1535759852/15649/2cba8c4b/56615b6fN6a873846.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t2089/259/1344864990/31575/e10681a6/56567151N00597360.jpg" class="uploadImg" alt="" id="localfile" >
<img src="http://img30.360buyimg.com/jr_image/jfs/t2320/340/1246298565/41235/6a164b17/5652bcb7Na9f44ab3.jpg" class="uploadImg" alt="" id="localfile" >
</div> 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子節點，即 <body> 標籤；
document.documentElement 是整個節點樹的根節點root，即<html> 標籤；