多个div或图片横排左右滑动展示及侧拉回弹效果

方法一，使用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;