本文探讨了在移动端给div设置高度并实现内容滚动时出现的卡顿问题，通过引入-webkit-overflow-scrolling:touch属性解决卡顿，并详细解释了如何避免滚动到底部页面无法触发滚动的情况。
当我们在移动端，给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>
扫一扫
2696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
