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

方法一，使用iscroll.js 插件：

HTML部分：

	

		

			
                               
                            

                                

                                    
                                    

                                
                            
                            

                                
                            
                            

                                你好，世界！
                            
                      
              
       

在以上代码中，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：

        

	        

	            

	                
全部
	                
asdddd
	                
demo-list
	                
啊啊啊
	                
demo-list
	                
demo-list
	                
demo-list
	
	                
demo-list
	                
demo-list
	                
demo-list
	                
demo-list
	            
	        
	

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;