多個div實現橫向滾動

2021-10-23 09:55:37 字數 523 閱讀 1248

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

1、實現如下:

設定多個併排的元素外面巢狀一層div(.parentdiv),設定此div的寬度等於所有子元素的寬度之和.

在.parentdiv的外層在巢狀乙個div設定樣式style: overflow-x: auto;

例項:div中多個實現左右滑動

注:實際中.imgbox的寬度需要js動態新增:img的寬度*img元素的個數。

橫向滾動tab實現

container dd style overflow hidden badge bg primary 前端開發 badge bg secondary 後端開發 badge bg primary 前端開發 badge bg secondary 後端開發 badge bg primary 前端開發 b...

子div超出父div部分橫向滾動,不換行

父div rootbar 子div childrenbar display的值及解釋 block 塊物件的預設值。將物件強制作為塊物件呈遞,為物件之後新增新行 none 隱藏物件。與 visibility 屬性的hidden值不同,其不為被隱藏的物件保留其物理空間 inline 內聯物件的預設值。將...

div橫向模擬滾動條,帶懶載入

之前工作需要,在網上找了乙個橫向的div模擬滾動條的方法,後來有自己改動了下,在相關js中加了乙個懶載入的方法,貼出來大家一起學習下 首先貼出相當於外掛程式的scrolltools.js var indexr 0 全域性變數,懶載入用 var tempbool false var flagt var...