Qui-Note官网Logo
导航:Qui-Note/scrollSnap

scrollSnap

<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>

效果展示:

横向吸附点滚动

1
2
3
4
5
6
7
8
9
10
8
9
10
8
9
10

纵向吸附点滚动

1
2
3
4
5
6
7
8
9
10
8
9
10
8
9
10
X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90