CSS 實現圖片橫向拖動

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

   <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或者插件實現圖片橫向滑動，這個網上有很多。