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


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

PHPz
PHPz

学习是最好的投资!

全部回覆(3)
巴扎黑

行動端你可以利用幾個事件和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. 這樣,你就可以實現滑動塊跟隨者手指的移動而滑動,而不會出現滾動條

小葫芦

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

PHPzhong

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板