天天看點

多個div實作橫向滾動

多個div實作橫向滾動

最近在做項目的時候需要實作多個元素橫向排列,需要其可在固定範圍内左右滑動,原本以為隻需要父元素的寬度固定子元素的寬度超過父元素的寬度幾個實作滑動,但事實上并不是這樣的。最終實作方式記錄如下:

1、實作如下:

設定多個并排的元素外面嵌套一層div(.parentDiv),設定此div的寬度等于所有子元素的寬度之和.

在.parentDiv的外層在嵌套一個div設定樣式style: overflow-x: auto;

執行個體:div中多個圖檔實作左右滑動

多個div實作橫向滾動
多個div實作橫向滾動
多個div實作橫向滾動

注:實際中.imgBox的寬度需要js動态添加:img的寬度*img元素的個數。

繼續閱讀