問(wèn)題描述

想起問(wèn)一下移動(dòng)端頁(yè)面怎么讓圖中的滾動(dòng)條消失，但是左右滑動(dòng)效果還是得有，目前是overflow-x auto,里面套了層width：270%；哪位大蝦幫忙看下

問(wèn)題解答

移動(dòng)端你可以利用幾個(gè)事件和transform來(lái)實(shí)現(xiàn)，思路如下：

比如，你要滑動(dòng)的塊是500px寬，屏幕是320px寬，先設(shè)置滑動(dòng)塊固定寬為500px，overflow:hidden，再加上transform:translate( 90px, 0)；

利用移動(dòng)端瀏覽器有三個(gè)觸摸事件：touchstart, touchmove, touchend;

touchstart觸發(fā)的時(shí)候，獲取手指的坐標(biāo)（x,y），如果只是左右滑動(dòng)的話，只要關(guān)注x軸的值即可；

touchmove事件會(huì)在手指觸摸屏幕不松開(kāi)的過(guò)程中，只要手指有移動(dòng)就會(huì)觸發(fā)，你在touchmove事件上獲取每一次事件觸發(fā)時(shí)的坐標(biāo)值（x,y），把每次的x軸的值與第三步獲取的x軸值對(duì)比，把兩者只差的值修改到滑動(dòng)塊的transform:translate這個(gè)屬性上；

最后，在touchend事件上，添加跟第四步類似的操作，最后結(jié)束transform:translate值的修改；

這樣，你就可以實(shí)現(xiàn)滑動(dòng)塊跟隨者手指的移動(dòng)而滑動(dòng)，而不會(huì)出現(xiàn)滾動(dòng)條。

https://jsfiddle.net/vgsuhs4L/你是說(shuō)這樣吧，我寫(xiě)了個(gè)Demo。

::-webkit-scrollbar{ width:0;}