CSS 如何讓層滾動
在網頁制作中,經常會遇到需要讓層(或者說 div)滾動的情況,這時候可以使用 CSS 的 overflow 屬性來實現。
overflow 屬性有四個值:visible(默認值,內容不會被修剪,會呈現在元素框之外)、hidden(內容被修剪,不會呈現在元素框之外)、scroll(內容被修剪,但是瀏覽器會顯示滾動條以便查看剩余的內容)和 auto(如果內容被修剪,瀏覽器會顯示滾動條以便查看剩余的內容)。
以 scroll 為例,代碼如下:
pre {
overflow: scroll;
}
這里使用的是 pre 標簽來展示代碼,其實也可以使用普通的 div 標簽。當元素中的內容超過了容器的高度,滾動條會自動出現。
除了基本的滾動功能,CSS 還有其他的一些屬性可以幫助我們定制滾動條的樣式,比如 scrollbar-width、scrollbar-color、scroll-snap-align 等等。不過這些屬性的兼容性并不是很好,需要謹慎使用。
總結一下,讓層滾動的方法就是通過設置 overflow 屬性為 scroll 或者 auto,然后在需要滾動的情況下會自動顯示滾動條。如果需要定制滾動條樣式,可以嘗試使用一些特別的 CSS 屬性。
下一篇html的代碼框