<h3>横向吸附点滚动</h3>
<style type="text/css">
    	 .scroll-box{
    	 	width: 100%;height: 250px;white-space: nowrap;overflow-x: scroll;
    	 	scroll-snap-type: x mandatory;
    	 	-webkit-overflow-scrolling:touch;
    	 }
    	 .scroll-box .item{width: 300px;height: 200px;display: inline-block;margin-right: 15px;text-align: center;background: #333;font: 16px/200px "微软雅黑";color: #fff;
    		scroll-snap-align: start;
    	 	scroll-snap-stop:always;
    	 }
    	 .scroll-box .item:nth-child(even){background: #666;}
        </style>
<div class="scroll-box">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
</div>
<h3>纵向吸附点滚动</h3>
<style type="text/css">
    	 .scroll-box-y{
    	 	width: 100%;height: 250px;overflow-y: scroll;
    	 	scroll-snap-type: y mandatory;
    	 	-webkit-overflow-scrolling:touch;
    	 }
    	 .scroll-box-y .item{width: 100%;height: 250px;display: inline-block;text-align: center;background: #333;font: 16px/250px "微软雅黑";color: #fff;
    		scroll-snap-align: start;
    	 	scroll-snap-stop:always;
    	 }
    	 .scroll-box-y .item:nth-child(even){background: #666;}
    </style>
<div class="scroll-box-y">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
</div>