CSS 實現圖片橫向拖動
阿新 • • 發佈:2019-01-22
在實際開發中需要實現圖片橫向拖動效果,查閱了些資料,現整理下,以便以後使用。
<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或者外掛實現圖片橫向滑動,這個網上有很多。