想起问一下移动端页面怎么让图中的滚动条消失,但是左右滑动效果还是得有,目前是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。
雷雷
移动端你可以利用几个事件和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。
雷雷