溢出滾動講起
Web 開發中,經常遇到需要固定容器大小,然后內部內容超出的情況,相信非技術的也經常會遇到這樣的場景,沒錯,幾乎打開任何一個門戶網站你使用鼠標滾輪就屬于上面的情況。
解決方案自然就是 overflow 這個 CSS 屬性。
visible 默認值。內容不會被修剪,會呈現在元素框之外。
hidden 內容會被修剪,并且其余內容是不可見的。
scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
效果如下:
visible
上面是 visible。
hidden
上面是 hidden。
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 代碼。
做了對比動圖,大家看一下:
auto 或 scroll
上面是 auto(或 scroll)控制,細節是右邊的滾動條會自動隱藏。
定制
上面是經過定制的,所以不會隱藏。
.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,建議沒有用過或者忘了的小伙伴保存一下,一定會再次用到的。
版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。