1. 程式人生 > >CSS 實現圖片橫向拖動

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