css - 移动端左右滑动

Question

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

Answer 1

行動端你可以利用幾個事件和transform來實現，想法如下：

1. 例如，你要滑動的塊是500px寬，螢幕是320px寬，先設定滑動塊固定寬為500px，overflow:hidden，再加上transform:translate( 90px, 0)；

2. 利用行動裝置瀏覽器有三個觸控事件：touchstart, touchmove, touchend;

3. touchstart觸發的時候，取得手指的座標（x,y），如果只是左右滑動的話，只要注意x軸的值即可；

4. touchmove事件會在手指觸摸螢幕不鬆開的過程中，只要手指有移動就會觸發，你在touchmove事件上獲取每一次事件觸發時的坐標值（x,y），把每次的x軸的值與第三步驟所獲得的x軸值對比，把兩者只差的值修改到滑動塊的transform:translate這個屬性上；

5. 最後，在touchend事件上，增加跟第四步類似的操作，最後結束transform:translate值的修改；

6. 這樣，你就可以實現滑動塊跟隨者手指的移動而滑動，而不會出現滾動條。

Answer 2

https://jsfiddle.net/vgsuhs4L/
你是說這樣吧，我寫了個Demo。

Answer 3

雷雷