-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.快速滑动页面会出现空白,滑动停止后内容才显示
相关文章详细解读