如何實作CSS3自訂捲軸樣式-css教學-PHP中文網

首頁

web前端

css教學

如何實作CSS3自訂捲軸樣式

不言

Jun 20, 2018 pm 05:56 PM

本篇文章主要介紹了CSS3自訂捲軸樣式的範例程式碼，內容挺不錯的，現在分享給大家，也給大家做個參考。

滾動條是個很常見的東東，不過某些瀏覽器自帶的滾動條確實不太好看啊，下面可以作為學習，探討下自定義滾動條的實現，這樣你的滾動條就可以美美的啦。但是，也只能玩玩，因為只針對webkit核心的瀏覽器啊啊啊啊啊！

overflow介紹

定義：overflow 屬性指定當它溢出其區塊級容器時,是否剪輯內容，渲染捲軸或顯示內容。

屬性值

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值

#註：任何的版本的Internet Explorer （包括IE8）都不支援屬性值「inherit」。

當overflow設為預設值（visible）以外的值時，將會建立一個會區塊級式化上下文（清除浮動的一種方式），更多可查看深入理解BFC和Margin Collapse

小tips

對於當行文字對超出部分的處理可使用一下屬性。（同時需設定元素的width值，還有overflow:hidden; 及white-space:nowrap; )

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

對於多行文字則需要用到不規範屬性-webkit-line-clamp ，此處不細講。

水平及垂直捲軸

使用 overflow-x 和overflow-y 可分別設定水平及垂直方向上的滾動條。

自訂捲軸實作

此部分針對webkit核心的瀏覽器，使用偽類別來改變捲軸的預設樣式，詳情如下：

捲軸組成部分

1. ::-webkit-scrollbar                捲軸整體部分
能向上向下移動（或向左向右移動）
3. ::-webkit-scrollbar-track          捲軸的軌道（內裝有Thumb）
4. ::條的軌道的兩端按鈕，由於點擊微調小方塊的位置。
5. ::-webkit-scrollbar-track-piece    內層軌道，捲軸中間部分
6. ::-webkit-scrollbar-corner         邊角，即垂直捲軸和水平捲軸相交的地方
7. ::-webkit-resizer                  兩個以捲軸為拖曳而調整中元件大小的小控制項上用於拖曳調整元件大小的小控制項

「滾動條組成結構圖#

下面來一組簡單自訂捲軸的實作：

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</p>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

更多效果如下圖：

注意只在chrome下有效！！！！！！