首頁 > 其他

DHTML 中捲軸的設定

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
　　自從 DHTML 出現以來，微軟對 DHTML 功能的加強就沒有停止過，在 IE 中增加了許多新的樣式表內容，對捲軸的樣式進行修改也是其中之一，下面我們簡單地介紹一下涉及瀏覽器捲軸的樣式表內容：
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立體捲軸陰影的顏色

以上七個屬性設定的值都是顏色值，可以使用樣式表定義的各種表達方式。

使用以上的樣式定義內容，我們可以指定瀏覽器視窗、多行文字框的捲軸的顯示與否和顏色樣式，第一組樣式屬性用於設定被設定對象是否顯示捲軸，第二組樣式屬性則用於設定捲軸的顏色，要注意的本文涉及的樣式屬性都是ie才能支援的，第二組的樣式屬性只有IE5.5以上版本才能支援，所以請大家在調試的時候注意。

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

1.讓瀏覽器視窗永遠都不出現捲軸

沒有水平捲軸

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

沒有垂直捲軸

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

沒有捲軸

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

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.設定其他元素時，基本上一樣，你最好是在樣式表檔案中定義好一個類，這樣你就可以重複使用了。

.coolscrollbar

{

scrollbar-arrow-color:yellow;

scrollbar-base-color:lightsalmon;

}

將以上語句加入到樣式表檔案中或html頭部的<style></style>當中，然後使用

<textarea class="coolscrollbar"></textarea>

本文章原先以中文撰寫並發佈於 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