You can use several events and transforms to achieve this on the mobile side. The idea is as follows:
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);
There are three touch events using mobile browsers: touchstart, touchmove, touchend;
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;
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;
Finally, add an operation similar to the fourth step on the touchend event, and finally end the modification of the transform:translate value;
In this way, you can realize that the slider slides following the movement of the finger, and no scroll bar will appear.
You can use several events and transforms to achieve this on the mobile side. The idea is as follows:
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);
There are three touch events using mobile browsers: touchstart, touchmove, touchend;
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;
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;
Finally, add an operation similar to the fourth step on the touchend event, and finally end the modification of the transform:translate value;
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.