手機端,解決【 overflow-y:scroll不流暢。。。。【-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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM