最近有个需求是图片列表,左右滑动,于是用的css的 overflow-x:scroll 实现的,元素得要float,具体就不说了,说问题,问题就是在移动端滑动得时候一点都不流畅,想要像用了swiper那样得滑动流畅,当时就找各种方法,其实用swiper就全解决了,但是也不能为了它,多引入200多kb的文件啊,最终找到了一种完美的解决方法,一行css代码搞定,如下:
.content ul li.list4 .picture {
width: 100%;
height: 3.64rem;
padding: .2rem 0 .32rem;
margin: 0;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
就是在最外层父元素 : overflow-x:scroll , 加上一行 -webkit-overflow-scrolling: touch; 哇塞,手机上真的可以了欸,开森~
附上:谷歌浏览器是自动会流畅
大佬说,能用css解决的千万不要用js解决 ,skr ~