css - 移动端左右滑动

问题描述

想起问一下移动端页面怎么让图中的滚动条消失，但是左右滑动效果还是得有，目前是overflow-x auto,里面套了层width：270%；哪位大虾帮忙看下

问题解答

移动端你可以利用几个事件和transform来实现，思路如下：

比如，你要滑动的块是500px宽，屏幕是320px宽，先设置滑动块固定宽为500px，overflow:hidden，再加上transform:translate( 90px, 0)；

利用移动端浏览器有三个触摸事件：touchstart, touchmove, touchend;

touchstart触发的时候，获取手指的坐标（x,y），如果只是左右滑动的话，只要关注x轴的值即可；

touchmove事件会在手指触摸屏幕不松开的过程中，只要手指有移动就会触发，你在touchmove事件上获取每一次事件触发时的坐标值（x,y），把每次的x轴的值与第三步获取的x轴值对比，把两者只差的值修改到滑动块的transform:translate这个属性上；

最后，在touchend事件上，添加跟第四步类似的操作，最后结束transform:translate值的修改；

这样，你就可以实现滑动块跟随者手指的移动而滑动，而不会出现滚动条。

https://jsfiddle.net/vgsuhs4L/你是说这样吧，我写了个Demo。

::-webkit-scrollbar{ width:0;}