方法一，使用iscroll.js 插件：
<script type="text/javascript" src="../script/iscroll-probe.min.js"></script>HTML部分：
<div id="wrapper" class="wrapper"> <div id="iscroll" class="iscroll"> <div class="con"> <ul id="other-hot-box"> <li> <div> <img/> <p></p> </div> </li> <li> <img/> </li> <li> 你好，世界！ </li> </ul> </div> </div> </div>在以上代码中，iscroll 为整个滑动容器。容器必须设置宽高，否则会被hidden隐藏。 每个 li 都是一个次级容器，其中可以放文字、图片、或者包含多种元素内容的div。
CSS：
#iscroll { width: 100%; height: 14rem; overflow: hidden; position: relative; } .con { white-space: nowrap; position: absolute; } .con ul li { width: 10.2rem; display: inline-block; margin-right: 6px; vertical-align: top; }js：
function loaded() { myScroll = new IScroll('#iscroll', { scrollX: true, click: true }); }将 id 填入以上代码后调用该函数即可。
iScroll插件的更多用法：概要及各种效果的实现
方法二，纯css (此方法在ios和安卓上都可用，但在安卓上拉倒最侧边没有多拉回弹效果)： HTML：
<div class="classify border-b" id="classify"> <div class="scrollbar"> <ul> <li>全部</li> <li>asdddd</li> <li>demo-list</li> <li>啊啊啊</li> <li>demo-list</li> <li>demo-list</li> <li>demo-list</li> <li>demo-list</li> <li>demo-list</li> <li>demo-list</li> <li>demo-list</li> </ul> </div> </div>CSS： 以下部分属性值在注释后依然可以在安卓上正常使用，在ios上尚未尝试。
.classify { /*position: relative;*/ /*width: 100%;*/ height: 4.2rem; overflow: hidden; } .classify .scrollbar{ /*width: 100%;*/ height: calc(100% + 18px); /*overflow-y: hidden;*/ overflow-x: auto; -webkit-overflow-scrolling: touch; } .classify .scrollbar ul { white-space: nowrap; /*font-size: 0;*/ /*height: 4.2rem;*/ padding: 0 5px; } .classify .scrollbar ul li { display: inline-block; height: 2.8rem; line-height: 2.8rem; border-radius: 2px; background: #f5f5f5; font-size: 1.3rem; margin: 0.6rem 5px 0; padding: 0 10px; color: #999; }若是 ul 外部有三层 div， 最外层 div 设置 overflow: hidden; 第二层 div 设置 overflow-x: auto; position: relative; height: 4.2rem; 最里层 div 设置 white-space: nowrap; position: absolute; ul 设置 line-height: 4.2rem; height: 4.2rem; display: -webkit-flex; li 设置 display: inline-block; margin: 0 19px; font-size: 1.4rem; text-align: center; line-height: 4.2rem;
