css - 移動端左右滑動

問題描述

想起問一下移動端頁面怎么讓圖中的滾動條消失，但是左右滑動效果還是得有，目前是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;}