如何?CSS3自訂捲軸樣式

來源:互聯網
上載者:User
本篇文章主要介紹了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 捲軸整體部分
2. ::-webkit-scrollbar-thumb 捲軸裡面的小方塊,能向上向下移動(或向左向右移動)
3. ::-webkit-scrollbar-track 捲軸的軌道(裡面裝有Thumb)
4. ::-webkit-scrollbar-button 捲軸的軌道的兩端按鈕,由於通過點擊微調小方塊的位置。
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下有效!!!!!!

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.