首頁 > 開發者 > CSS

css中設定scroll的顏色

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
直接粘代碼拉,這個僅僅適用於IE 轉載請註明 http://netsos.cnblogs.com/div
{
  scrollbar-3dlight-color:#000000;
  scrollbar-highlight-color:#cccccc;
  scrollbar-face-color:#000000;
  scrollbar-arrow-color:#ffffff;
  scrollbar-shadow-color:#666666;
  scrollbar-darkshadow-color:#999999;
  scrollbar-track-color:#dddddd;
  height:100px;
  width:400px;
  padding:100px 0 0 0;
  border:1px solid #666666;
  overflow:scroll;
}
</style>
</head>
 
<body> 
  <div>這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br />這裡是元素內容部分<br /></div>
</body>

 Firefox的還沒試呢，看看吧

 

強制Firefox顯示捲軸：

方法一：html {overflow:-moz-scrollbars-vertical;}

方法二：html {min-height:101%;}

為什麼要強制顯示捲軸？因為在Firefox你會發現頁面在沒有載入完全的時候是沒有捲軸的，當載入完成後捲軸才顯示出來，所以會感覺頁面位移了下。

 轉載請註明 http://netsos.cnblogs.com/

另闢蹊徑：使用Jquery

 

<script type=”text/javascript” src=”jquery-1.1.3.1.js”></script>
<script type=”text/javascript” src=”jquery.linscroll.js” ></script>

 <script type=”text/javascript”>
    $(document).ready(
        function(){
            $(‘#smsContent’).setScroll( //可根據DIV的ID，class進行控制顯示。
                {img:'scroll_bk.gif’,width:10},//background-image and width
                {img:'scroll_arrow_up.gif’,height:3},//up image
                {img:'scroll_arrow_down.gif’,height:3},//down image
                {img:'scroll_bar.gif’,height:25}//bar image
            );
            }
        );
   
    </script>

Html代碼：

<div id=”smsContent” style=”width:140px;overflow:hidden;height:170px;”>
 一名駭客日前宣稱,他已經破解了蘋果CE名駭客自稱“orin0co”.他表示,他通過釣 魚的方式擷取了喬布斯在亞馬遜上的帳號密碼.記錄顯示,喬布斯過去10年中在亞馬遜上購買了2萬件商
 </div>

此外掛程式最大的好處可自訂捲軸的樣式，自己加工幾張圖片就可以了。而且在DIV的內容不超過預設定高度的時候，不會出現捲軸。 

 

http://blog.gaoso.com.cn/2009/05/401.html  讓我下載，好像還要收一毛錢，艾！～～～～～～～～～～～～

 轉載請註明 http://netsos.cnblogs.com/

還有一個 從其他論壇靠下來的

把它放到一個css檔案中

@-moz-document url-prefix(http://),url-prefix(https://) {
/* 捲軸顏色 */
scrollbar {
   -moz-appearance: none !important;
   background: #00ff00 !important;
}

/* 捲軸按鈕顏色 */
thumb,scrollbarbutton {
   -moz-appearance: none !important;
   background-color: #0000ff !important;
}

/* 滑鼠移至上方時按鈕顏色 */
thumb:hover,scrollbarbutton:hover {
   -moz-appearance: none !important;
   background-color: #ff0000 !important;
}

/* 隱藏上下箭頭 */
scrollbarbutton {
   display: none !important;
}

/* 縱向捲軸寬度 */
scrollbar[orient="vertical"] {
   min-width: 15px !important;
}
}

 轉載請註明 http://netsos.cnblogs.com/

 

 

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

相關關鍵詞：
background image scroll css scroll design css css horizontal scroll menu css background image scroll slower how to scroll background image in css elasticsearch scroll scroll divider
相關文章
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