关于网页的横向滚动，虽然网页中不是很常见，应该说与我们常用的网页纵向滚动反其道而行之。但是目前网站也能看到，当你滚动网页时，它的内容是从浏览器右侧出来而非浏览器的下侧，给人以一种新颖的感觉。

例如，淘宝的店铺后院: http://homemate-uk.taobao.com/hy/index.htm#!/xb/26303 ，可以说，淘宝里面的效果或许用到了缓冲效果，但由于我目前web前端的知识尚浅，所以并不知它是如何实现的。但下面这个我自己研究的例子基本实现了网页的横向滚动，且无兼容性问题。

它的主要原理是通过滚动鼠标的方向，从而每次改变内容层的 left 的值，这样它就能向左或向右移动一定距离。

但需要注意，当鼠标滚动到最左和最右这些临界值时，网页有时会抖动，因此我们需要单独处理。

下面贴出例子的源码，仅供参考。

<style>
body,ul,li,p{margin:0;padding:0;}
body{font-size:12px;-webkit-text-size-adjust:none;height:100%;width:100%;overflow:hidden;}
#wrap{position:relative;width:100%;height:400px;}
#wrap ul{position:absolute;top:0;left:0;line-height:30px;padding-top:200px;}
#wrap ul li{list-style:none;width:400px;height:100%;float:left;text-align:center;}
#wrap ul li p{padding:0 30px;}
.clearfix{zoom:1;}
.clearfix:after{display:block;content:”;height:0;clear:both;}
</style>

<div id="wrap" class="clearfix">
　 <ul class="clearfix">
      <li><img src="../images/01.jpg"/> <p>海岛</p></li>
      <li><img src="../images/02.jpg"/> <p>花海</p></li>
      <li><img src="../images/03.jpg"/> <p>海滩</p></li>
      <li><img src="../images/04.jpg"/> <p>森林</p></li>
      ...
      <li><img src="../images/20.jpg"/> <p>森林</p></li>
　 </ul>
</div>

<script>
var oWrap=document.getElementById("wrap"),
    oUl=oWrap.getElementsByTagName("ul")[0];
    aLi=oWrap.getElementsByTagName("li");
    oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";

function addEvent(obj,sEvent,fn){
　 if(obj.attachEvent){
      obj.attachEvent("on"+sEvent,fn);
　 }
　 else{
      obj.addEventListener(sEvent,fn,false);
　 }
}

addEvent(oUl,"mousewheel",move);
addEvent(oUl,"DOMMouseScroll",move);

function move(ev){
    var oEvent=ev||event;
    var bDown=true;
  
    bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;

    if(bDown){
        if(oUl.offsetLeft<-(oUl.offsetWidth-document.body.clientWidth)+40){  //防止滚过最右侧，网页抖动，因为用户滚动的距离不确定
            oUl.style.left=-(oUl.offsetWidth-document.body.clientWidth)+"px";
        } else {
            oUl.style.left=oUl.offsetLeft-30+"px";
        }
    } else {
        if(oUl.offsetLeft>-40){   //防止滚过最左侧，网页抖动，因为用户滚动的距离不确定
            oUl.style.left=0;
        } else {
          oUl.style.left=oUl.offsetLeft+30+"px"; 
        }
　 } 
　 document.title=bDown; //上下滚动时，在title打印出bDown的值 （true or false）
}
</script>