移动端滑动时页面惯性滑动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.快速滑动页面会出现空白，滑动停止后内容才显示 

 

相关文章详细解读