首頁 > 其他

DIV Scroll屬性

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

DIV Scroll屬性詳解，為DIV層打造不同的捲軸。

一、scrollbar屬性、樣式詳解 
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立體捲軸陰影的顏色

我們通過幾個執行個體來講解上述的樣式屬性：

1.設定多行文字框的捲軸

  沒有水平捲軸
   <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>

2.讓瀏覽器視窗永遠都不出現捲軸
    沒有水平捲軸
    <body style="overflow-x:hidden">
    沒有垂直捲軸
    <body style="overflow-y:hidden">
    沒有捲軸
    <body style="overflow-x:hidden;overflow-y:hidden">或<body  
    style="overflow:hidden">

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

<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 
}

4.設定視窗捲軸的顏色

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

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

聯繫我們

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