移動端滑動時頁面慣性滑動overflow-scrolling: touch

-webkit-overflow-scrolling:auto | touch;

auto： 普通滾動，當手指從觸摸屏上移開，滾動立即停止 
touch：滾動回彈效果，當手指從觸摸屏上移開，內容會保持一段時間的滾動效果，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

兼容寫法：

over-flow: auto; /* winphone8和android4+ */

-webkit-overflow-scrolling: touch; /* ios5+ */

<div class="scrollContainer">
     <div class="content">
       <p>內容1</p>
       <p>內容2</p>
       <p>內容3</p>
       <p>內容4</p>
       <p>內容5</p>
       <p>內容6</p>
       <p>內容7</p>
       <p>內容8</p>
       <p>內容9</p>
       <p>內容10</p>  
     </div>
</div>

 

.scrollContainer{
    position: fixed;
    top: 0;
    height: 1770px;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.content{
    height: 6000px;
    width: 100%;
    background: skyblue;
    z-index: 99;
}

 

有幾率出現的bug

1.父級元素scrollContainer加上定位position，滑動幾次后可滾動區域會卡主，不能在滑動 

2.快速滑動頁面會出現空白，滑動停止后內容才顯示 

 

相關文章詳細解讀