overflow-yscroll 卡顿问题解决 -webkit-overflow-scrolling: touch(允许独立的滚动区域和触摸回弹)
给div设置overflow-y:scroll;内容滚动时,移动端会出现卡顿现象,
-webkit-overflow-scrolling: touch;可以加速设备,WebKit私有的属性“-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" /> <script type="text/javascript" src="js/jquery.min.js"></script> <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>
给心灵一个纯净空间,让思想,情感,飞扬!