在實際開發中需要實現圖片橫向拖動效果，查閱了些資料，現整理下，以便以后使用。

<div class="problemImg"><img class="problemImg2" src="" alt=""><img class="problemImg2" src="" alt=""></div>

我的代碼結構如上

.problemImg{ white-space:nowrap; /*文本不換行*/overflow-x:auto; /*在橫向內容溢出元素框時，瀏覽器會顯示滾動條以便查看其余的內容*/overflow-y:hidden; /*在縱向內容溢出元素框時，其余內容是不可見的*/ }

寬高自己定義，一個簡單的圖片拖動已經做好了。不過這時候查看發現，在圖片下邊會有一個滾動條，為了去除滾動條，在最外面一層加了一個div,樣式設為overflow:hidden。里面最外層div的裁剪功能把滾動條隱藏起來。

.problemImg::-webkit-scrollbar{display: none; }

這個方法僅對谷歌和Safari生效。

第二個方向是利于對滾動條的樣式修改，我們可以對滾動條的寬高，顏色進行修改，來達到滾動條隱藏的效果，具體代碼還沒整理，有時間了再補充上來。

第三個就是用js或者插件實現圖片橫向滑動，這個網上有很多。

總結

以上是生活随笔為你收集整理的CSS 实现图片横向拖动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。