文章詳情頁
css - 移動端左右滑動
瀏覽:102日期:2023-06-27 09:56:23
問題描述
想起問一下移動端頁面怎么讓圖中的滾動條消失,但是左右滑動效果還是得有,目前是overflow-x auto,里面套了層width:270%;哪位大蝦幫忙看下
問題解答
回答1:移動端你可以利用幾個事件和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值的修改;
這樣,你就可以實現滑動塊跟隨者手指的移動而滑動,而不會出現滾動條。
回答2:https://jsfiddle.net/vgsuhs4L/你是說這樣吧,我寫了個Demo。
回答3:::-webkit-scrollbar{ width:0;}
標簽:
CSS
相關文章:
1. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。2. python執行cmd命令,怎么讓他執行類似Ctrl+C效果將其結束命令?3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?5. 實現bing搜索工具urlAPI提交6. Python中使用超長的List導致內存占用過大7. javascript - 我是做web前端的,公司最近有一個項目關于數據統計的!8. python - Django有哪些成功項目?9. 鏈接圖片時,鏈接不成功10. node.js - 微信小程序websocket連接問題
排行榜
