让滚动的内容在IOS上滚动动作更平滑

默认情况下,网页在IOS上的scroll滚动就像在冰面上推冰球,轻轻一推,它会自动滚动并且减慢速度直至停止。而网页内容中同样需要将溢出内容以scroll的方式展示,直接使用overflow:auto并不能达到同样的效果,用手指触摸滑动时会变得生涩卡壳。于是需要给元素加上这样一个特殊属性:

-webkit-overflow-scrolling: touch;

例:

HTML:

<div class=”touch”>
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS:

.touch{
width: 300px;
height: 200px;

overflow-y: scroll; /* 重点:必须是scroll而不是auto */
-webkit-overflow-scrolling: touch;/*关键*/
}

 

原文链接(查看案例):http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/