?
Ce document utilise Manuel du site Web PHP chinois Libérer
-webkit-overflow-scrolling:auto | touch
默認(rèn)值:auto
適用于:塊容器,伸縮盒容器,grid容器
繼承性:無(wú)
動(dòng)畫(huà)性:否
計(jì)算值:指定值
auto:默認(rèn)值。當(dāng)手指從觸摸屏上移開(kāi),滾動(dòng)會(huì)立即停止,相當(dāng)于普通的滾動(dòng)效果。
touch:使用具有回彈效果的滾動(dòng),當(dāng)手指從觸摸屏上移開(kāi),內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆疊上下文。
該屬性用來(lái)控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果。
該屬性在 iOS UIWebView 中無(wú)效。
該屬性需與 overflow 屬性配合使用,因?yàn)楸仨毾榷x元素允許滾動(dòng),才可以指定它在滾動(dòng)具有回彈效果。
.demo { height: 200px; overflow-y: auto; /* 允許元素滾動(dòng),值可以是 auto | scroll */ -webkit-overflow-scrolling: touch; /* 定義滾動(dòng)時(shí)回彈效果 */ }
在移動(dòng)設(shè)備上運(yùn)行這個(gè)示例,將能感受到與 Native 相同的滾動(dòng)回彈;
對(duì)應(yīng)的腳本特性為webkitOverflowScrolling。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-overflow-scrolling_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</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>請(qǐng)?jiān)谝苿?dòng)設(shè)備上查看本例</h2> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例