?
This document uses PHP Chinese website manual Release
-webkit-overflow-scrolling:auto | touch
默認(rèn)值:auto
適用于:塊容器,伸縮盒容器,grid容器
繼承性:無
動畫性:否
計(jì)算值:指定值
auto:默認(rèn)值。當(dāng)手指從觸摸屏上移開,滾動會立即停止,相當(dāng)于普通的滾動效果。
touch:使用具有回彈效果的滾動,當(dāng)手指從觸摸屏上移開,內(nèi)容會繼續(xù)保持一段時(shí)間的滾動效果。繼續(xù)滾動的速度和持續(xù)的時(shí)間和滾動手勢的強(qiáng)烈程度成正比。同時(shí)也會創(chuàng)建一個(gè)新的堆疊上下文。
該屬性用來控制元素在移動設(shè)備上是否使用滾動回彈效果。
該屬性在 iOS UIWebView 中無效。
該屬性需與 overflow 屬性配合使用,因?yàn)楸仨毾榷x元素允許滾動,才可以指定它在滾動具有回彈效果。
.demo { height: 200px; overflow-y: auto; /* 允許元素滾動,值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定義滾動時(shí)回彈效果 */ }
在移動設(shè)備上運(yùn)行這個(gè)示例,將能感受到與 Native 相同的滾動回彈;
對應(yīng)的腳本特性為webkitOverflowScrolling。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-overflow-scrolling_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> html, body { overflow: hidden; } .demo { height: 200px; background-color: red; overflow-y: auto; -webkit-overflow-scrolling: touch; } </style> </head> <body> <div class="demo"> <h2>請?jiān)谝苿釉O(shè)備上查看本例</h2> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例