<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • html自定義滾動條樣式(div滾動條設置方法)


    溢出滾動講起

    Web 開發中,經常遇到需要固定容器大小,然后內部內容超出的情況,相信非技術的也經常會遇到這樣的場景,沒錯,幾乎打開任何一個門戶網站你使用鼠標滾輪就屬于上面的情況。

    解決方案自然就是 overflow 這個 CSS 屬性。

    visible 默認值。內容不會被修剪,會呈現在元素框之外。

    hidden 內容會被修剪,并且其余內容是不可見的。

    scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。

    auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。

    inherit 規定應該從父元素繼承 overflow 屬性的值。

    效果如下:CSS 自定義滾動條和強制顯示

    visible

    上面是 visible。CSS 自定義滾動條和強制顯示

    hidden

    上面是 hidden。CSS 自定義滾動條和強制顯示

    scroll 與 auto

    上面是 scroll 與 auto。

    注意,Chrome 系列瀏覽器都會自動隱藏滾動條,不論設置 auto 還是 scroll。

    因此我們才有今天的話題。

    inherit 就不舉例了,這個與父元素有關。

    強制顯示滾動條

    首先,scroll 說好的顯示,被瀏覽器給搞掉了。

    其次,隱藏是好事畢竟占位置,而且當今的網民基本都本能的知道滾動操作。

    最后,個人舉四肢贊成自動隱藏。

    但是?。。?/p>

    你總會遇到不怎么上網的網民,在看不到內容時候不知所措。

    亦或者,你遇到的坑爹的老板,就是要讓你顯示(這個老板可能不怎么上網……)。

    或者你們產品設計對象就是一些非網民的使用。

    又或者你們設計覺得有個自定義滾動條好看。

    等等等等情況,相信我,你一定會遇到這個情況的。

    于是我們需要定制一個滾動條,放心,CSS 偽類已經給你提供好了。

    核心代碼由 Steven Lewis:
    https://codepen.io/stevenlewis/pen/hubpL 提供,本人用到,精簡下順便搬運。

    <div class="frame">
     Foo<br />
     Bar<br />
     Baz<br />
     Help I'm trapped in an HTML factory! 
    </div>
    

    上面是 HTML 代碼。

    frame {
     overflow-y: auto;
     border: 1px solid black;
     height: 3em;
     width: 10em;
     line-height: 1em;
    }
    .frame::-webkit-scrollbar {
     -webkit-appearance: none;
    }
    .frame::-webkit-scrollbar:vertical {
     width: 11px;
    }
    .frame::-webkit-scrollbar-thumb {
     border-radius: 8px;
     border: 2px solid white;
     background-color: rgba(0, 0, 0, .5);
    }
    

    這里是對應的 CSS 代碼。

    做了對比動圖,大家看一下:CSS 自定義滾動條和強制顯示

    auto 或 scroll

    上面是 auto(或 scroll)控制,細節是右邊的滾動條會自動隱藏。CSS 自定義滾動條和強制顯示

    定制

    上面是經過定制的,所以不會隱藏。

    .frame::-webkit-scrollbar {
     -webkit-appearance: none;
    }
    

    隱藏默認的滾動條。

    .frame::-webkit-scrollbar:vertical {
     width: 11px;
    }
    

    設置垂直滾動條寬度。

    當然也有水平滾動條配置,
    .frame::-webkit-scrollbar:horizontal,那么就要設置他的高度的。如下:

    .frame::-webkit-scrollbar:horizontal {
     height: 11px;
    }
    

    .frame::-webkit-scrollbar-thumb {
     border-radius: 8px;
     border: 2px solid red;
     background-color: rgba(0, 0, 0, .5);
    }
    

    滾動條的其他樣式定制,注意,這個一定也要定制,否則就是一個透明的滾動條……


    OK,建議沒有用過或者忘了的小伙伴保存一下,一定會再次用到的。

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费