84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
想起问一下移动端页面怎么让图中的滚动条消失,但是左右滑动效果还是得有,目前是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; }
移动端你可以利用几个事件和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。