當我們在移動端,給div設置一個高度,使用 overflow-y:scroll實現 div內容滾動的時候,會發現滾動內容卡頓。。
此時使用 -webkit-overflow-scrolling: touch;可以解決卡頓問題。。。。
但是會出現滾動到底部,頁面無法觸發滾動的問題。
-webkit-overflow-scrolling: touch;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll測試</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
*{ margin:0; padding:0;}
html{ height:100%;}
body{ text-align:center; height:100%;}
img{ width:100%;}
.main{ width:100%; height:100%; margin:0 auto; overflow-y:scroll; -webkit-overflow-scrolling: touch;}
</style>
</head>
<body>
<div class="main"><img src="img/1.jpg" alt=""></div>
</body>
</html>