解决手机访问页面滚动不流畅的问题

2015年03月22日

最近发现当用手机浏览器访问自己的博客的时候会遇到卡顿的问题,特别是当点击一篇稍微长点的博文,比如设计模式详解及PHP实现,会明显的感觉滑动不流畅,而且会在滑动到某个地方的时候卡住,无法往下滑动。这个问题困扰了我几天,开始以为是js的影响,尝试去掉一些可能影响的js,问题仍然得不到解决。直到今天。。。终于搞定了:yum:

解决手机滚动不流畅的问题

如何解决的呢,其实很简单,只加了一句css

-webkit-overflow-scrolling: touch;

是不是很神奇啊:smile: 这是由于对html中的某个div或模块使用了overflow scroll属性的时候会造成滑动这个模块的时候产生卡顿。这行代码只对手机端浏览器有效,它启用了硬件加速,使得滑动变得流畅,不过会消耗更多的内存。