首頁 > 開發者 > CSS

CSS：scrollbar的屬性知識及樣式分類介紹

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
scrollbar在CSS裡也是很常用的一個代碼.我們把它介紹一下1．overflow內容溢出時的設定（設定被設定對象是否顯示捲軸）
overflow-x水平方向內容溢出時的設定
overflow-y垂直方向內容溢出時的設定
以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立體捲軸亮邊的顏色（設定捲軸的顏色）
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color捲軸的基本顏色
scrollbar-dark-shadow-color立體捲軸強陰影的顏色
scrollbar-face-color立體捲軸凸出部分的顏色
scrollbar-highlight-color捲軸空白部分的顏色
scrollbar-shadow-color立體捲軸陰影的顏色 86oo精彩教程
我們通過幾個執行個體來講解上述的樣式屬性：
1.讓瀏覽器視窗永遠都不出現捲軸
沒有水平捲軸 

<body style="overflow-x:hidden">


沒有垂直捲軸 

<body style="overflow-y:hidden">


沒有捲軸 

<body style="overflow-x:hidden;overflow-y:hidden">

或

<body style="overflow:hidden"> http://www.o.com

2.設定多行文字框的捲軸
沒有水平捲軸 

<textarea style="overflow-x:hidden"></textarea>

沒有垂直捲軸 

<textarea style="overflow-y:hidden"></textarea>

沒有捲軸 

<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>

或

<textarea style="overflow:hidden"></textarea>

3.設定視窗捲軸的顏色
設定視窗捲軸的顏色為紅色<body style="scrollbar-base-color:red">
scrollbar-base-color設定的是基本色，一般情況下只需要設定這一個屬性就可以達到改變捲軸顏色的目的。
加上一點特別的效果： 

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">


4.在樣式表檔案中定義好一個類，調用樣式表。 

<style> .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} </style>

這樣調用： 

<textarea class="coolscrollbar"></textarea> Scrollbar-Face-Color為捲軸表面顏色設定； Scrollbar-Highlight-Color為捲軸上斜面和左斜面顏色設定； Scrollbar-Shadow-Color為捲軸下斜面和右斜面顏色設定； Scrollbar-3Dlight-Color為捲軸上邊和左邊的邊沿顏色設定； Scrollbar-Arrow-Color為捲軸兩端箭頭顏色設定。 Scrollbar-Track-Color為捲軸底板顏色設定； Scrollbar-Darkshadow為捲軸下邊和右邊邊沿顏色設定。

舉例： 

body { background-color: #ffffff; color: #336699; SCROLLBAR-FACE-COLOR: #BED8EB; SCROLLBAR-SHADOW-COLOR: #DDF8FF; SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; SCROLLBAR-TRACK-COLOR:#BED8EB; SCROLLBAR-ARROW-COLOR: #92C0D1 }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More