css - 移动端左右滑动
PHPz
PHPz 2017-04-17 11:56:06
0
3
1030


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

PHPz
PHPz

学习是最好的投资!

reply all(3)
巴扎黑

You can use several events and transforms to achieve this on the mobile side. The idea is as follows:

  1. For example, if the block you want to slide is 500px wide and the screen is 320px wide, first set the fixed width of the sliding block to 500px, overflow:hidden, and add transform:translate(90px, 0);

  2. There are three touch events using mobile browsers: touchstart, touchmove, touchend;

  3. When touchstart is triggered, get the coordinates (x, y) of the finger. If you just slide left and right, just pay attention to the x-axis value;

  4. The touchmove event will be triggered as long as the finger moves while the finger touches the screen without releasing it. You obtain the coordinate value (x, y) of each event on the touchmove event, and put each Compare the x-axis value obtained in the third step with the x-axis value obtained in the third step, and modify the difference between the two to the transform:translate attribute of the slider;

  5. Finally, add an operation similar to the fourth step on the touchend event, and finally end the modification of the transform:translate value;

  6. In this way, you can realize that the slider slides following the movement of the finger, and no scroll bar will appear.

小葫芦

https://jsfiddle.net/vgsuhs4L/
You mean this, I wrote a Demo.

PHPzhong
::-webkit-scrollbar{
            width:0;
        }
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template