純CSS實現橫向滾動條

2021-10-01 11:22:27 字數 910 閱讀 4958

*(一)前言

基於大部分場景,我們需要使用橫向滾動,這種時候,大部分會選擇swiper來實現,但是其實,我們也可以通過純css的方式實現乙個滾動條

*(二)實現

大家都知道overflow 可以單獨設定

// 橫向滾動

overflow-x: scroll;

// 縱向滾動

overflow-y: scroll;

基於上面知識,我們首先來實現乙個滾動,

從上面結果我們可以發現,

1.滾動條依然存在

2.在ios真機上滑動會出現卡頓,但是android卻正常

我們來解決上面兩個問題

commit更改,就是解決上面兩個問題,但是目前會出現其他情況,你會發現,滾動條雖然在谷歌控制台不在出現,但是在ios真機,依然會出現。

這時候我們需要調整下布局,

我們知道外層容器.container 是隱藏顯示內容的,這時候我們可以css的calc函式將ul的寬度,撐高20px,然後再通過padding-bottom: 20px 將原來的高度較準,這樣雖然滾動條 依然存在,但是已經在.container外面,使用者不可見,

那麼實現**如下

那麼到現在,我們demo已經實現完成。

python橫向滾動條 控制滾動條

調過js指令碼控制 python 1.coding utf 8 2.from selenium import webdriver 3.import time 5.driver webdriver.firefox 6.driver.get 7.搜尋 8.driver.find element by i...

橫向滾動條(滑動條)

asp.net的gridview本身不帶滾動條,可通過panel實現。但是windows自帶的橫向滾動條只支援顯示在下方,為了使用方便,需要在上下方都顯示橫向滾動條。查詢了很多方法,有些不能實現 被滾動內容的寬度未知,但使用這種方法必須已知 其它的不能完全相容這些瀏覽器 ie6,firefox,ch...

extjs gridpanel 橫向滾動條

mlb弄個girdpanl列太多竟然不會自動出現橫向滾動條,讓我對ext的易用性大為懷疑,在google一艘解決方案一大堆,五花八門,試了一遍竟然沒有乙個可以解決,這是神馬世界,自己把屬性挨著除錯了一遍,我相信絕對是屬性設定的有問題,終於發現了 width 1200,height 400,autoh...