滾動條

時間 2019-12-18

標籤滾動條简体版

原文原文鏈接

<div id="showDiv"> 
  <script type="text/javascript">   
      window.onload=function(){   
var obj=document.getElementById("showDiv");   
if(obj.scrollHeight>obj.clientHeight||obj.offsetHeight>obj.clientHeight){ 
document.getElementById("hiddenDiv").style.height="15pt"; 
  } 
  }   
  </script> 
  <div id="hiddenDiv" style="height:"></div> 
</div>


---------------------
當可視區域小於頁面的實際高度時，斷定爲出現滾動條，即：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

要使用 document.documentElement ，必須在頁面頭部加入聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

其實，這段代碼是不起做用的，由於他沒考慮到一個問題，就是瀏覽器的邊框，當咱們在獲取頁面的offsetHeight高度時是包括了瀏覽器的邊框的，瀏覽器的邊框是2個像素，因此這時不管在任何狀況下clientHeight 始終是小於offsetHeight的，這就使得即便沒有滾動條它也爲true,所以咱們要修正這個錯誤，代碼應該這樣改，在offsetHeight上減去4個像素，即：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

//執行相關腳本。

}

還有，這裏要搞清楚，上面這代碼是判斷橫向滾動條的，咱們通常要判斷的是縱向滾動，代碼以下：

 

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

//執行相關腳本。

｝

前段時間，到網上找素材時，看到了一個很個性的滾動條式，打開Chrome的調試工具看了一下，發現不是用JavaScript來模擬實現的，以爲有必要折騰一下。因而在各大瀏覽器中對比了一下，發現只用Chrome適用，也就是說這個用的是Chrome的私有CSS屬性。便百之谷以後，發現原來不只僅只用Chrome，其它的瀏覽器在不一樣程度上支持自定義滾動條樣式的。下面是我不斷測試的結果，如有錯誤或不全，請在評論裏面給出，我會立馬更正；如有更好的方案，你能夠留言，讓你們都開開眼界。。。。。。javascript

自定義IE瀏覽器滾動條樣式

追溯瀏覽器對滾動條的自定義，恐怕最先的就是IE瀏覽器了（好像最開始支持的版本是IE5.5）。下面列出了多個版本的支持性況：css

滾動條樣式	支持狀況	支持瀏覽器版本	能否繼承	描述
scrollbar-3dlight-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-highlight-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭左上邊緣的顏色
scrollbar-face-color	IE特有屬性	IE5.5+	y	設置滾動框和滾動條箭頭的顏色
scrollbar-arrow-color	IE特有屬性	IE5.5+	y	設置滾動條箭頭的顏色
scrollbar-shadow-color	IE特有屬性	IE5.5+	y	設置滾動框的和滾動條箭頭右下邊緣的顏色
scrollbar-dark-shadow-color	IE特有屬性	IE5.5+	y	設置滾動條槽的顏色
scrollbar-base-color	IE特有屬性	IE5.5+	y	設置滾動條主要構成部分的顏色
scrollbar-track-color	IE特有屬性	IE5.5+	y	設置滾動條軌跡組成部分的顏色

爲了有助於理解IE中滾動條樣式的控制，你能夠查看以下的圖片：html

通過不斷的測試發現，在Win8 下面，有一部分樣式都起着相同的做用。估計是由於在Win8中扁平化的界面設計而從新定議了系統中滾動條！如下是Win 8下面的滾動條樣式，並寫出了和CSS支持的狀況：前端

以上所寫的幾個四個CSS屬性，足以控制Win 8系統下，IE瀏覽器的滾動條樣式了。但通過測試，發現，其它的四個屬性仍然支持（主要是在以上幾個屬性空缺時，就會體現其做用）。具體以下：java

關於scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。直接看英語單詞，你就也許能明白scroll-base-color是一個備用顏色，只要前二者未設置時，它就開始起做用了。可是你得注意，當scrollbar-base-color用來做scrollbar-track-color功能來用時，你會發現，實際顏色與設定的顏色要淡一點。不信你能夠這樣試試：只設置一下scrollbar-base-color看看滾動條的效果。
關於scrollbar-dark-shadow-color屬性，經過測試發現Win 8下IE10，IE11滾動條並無改變。多是win 8的滾動條從新定義了，致使沒有了隱影了吧！（僅我的猜測）
經過觀察咱們發現，Win 8下的滾動條中，上箭頭和下箭頭後面的背景顏色都已經從scroll-face-color中脫離出來了，從屬於scroll-track-color屬性控制。

感受IE瀏覽器滾動條自定製功能並非很強，只能控制同樣顯示各個部分的顏色而已，像寬度，結構等都沒法控制，要靠出個性點的滾動條，很難！很難！！！jquery

自定義FireFox瀏覽器滾動條

在網上找了不少關於Firfox自定義瀏覽器滾動條的方法，發現firefox中卻實是不支持的。發現了幾篇說能夠更改，自已也跟着代碼寫了幾回（不知是我錯了仍是。。。），發現倒是不起做用。如下是一點小的收穫：web

複製

@-moz-document url-prefix(http://),url-prefix(https://) {
/* 滾動條顏色 */
scrollbar {
-moz-appearance: none !important;
background: rgb(0,255,0) !important;
}
/* 滾動條按鈕顏色 */
thumb,scrollbarbutton {
-moz-appearance: none !important;
background-color: rgb(0,0,255) !important;
}
/* 鼠標懸停時按鈕顏色 */
thumb:hover,scrollbarbutton:hover {
-moz-appearance: none !important;
background-color: rgb(255,0,0) !important;
}
/* 隱藏上下箭頭 */
scrollbarbutton {
display: none !important;
}
/* 縱向滾動條寬度 */
scrollbar[orient="vertical"] {
min-width: 15px !important;
}
}

實測以上代碼並不起做用。但也多是個人瀏覽器的版本不對吧！你能夠試試，要是有效的話，你能夠把你的FF版本發表在文章評論裏面。ajax

下面給兩個關於FF滾動條的討論(你多少web開發者但願FF可以像webkit內核瀏覽器同樣程度的來支持滾動條自定義)：api

webkit內核的瀏覽器滾動條定製

在全部瀏覽器，滾動條可定製性最強的當屬webkit內核的瀏覽器了。由於源代碼開放的緣由，市面上基於webkit內核的瀏覽器也是很難窮舉完。例若有：Google Chrome、Opera（opera最近宣佈使用webkit內核了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······瀏覽器

下面咱們來看一下webkit瀏覽器是如何強大的吧！

複製

CSS
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

以上CSS代碼所管轄的區域對就關係：以上註釋中的數字與下圖中數字相對應。

上圖正如以下所言：

::-webkit-scrollbar 滾動條總體部分，其中的屬性有width,height,background,border（就和一個塊級元素同樣）等。
::-webkit-scrollbar-button 滾動條兩端的按鈕。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track 外層軌道。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb 滾動條裏面能夠拖動的那部分
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式

注意：對以上各個部分定義width,height時。有以下功能：如果水平滾動條，則width屬性不起做用，height屬性用來控制滾動條相應部分豎直方向高度；如果豎直滾動條，則height屬性不起做用，width屬性用來控制相應部分的寬度。

能過上面的不斷的測試。在Chrome中，滾動條中的各個部分和DOM中塊級元素是同樣的。經過::-webkit-scrollbar等就相似於原來所說的CSS中的選擇器。而{}中的屬性，你就像控制通常塊級元素同樣簡單（強大啊）。

請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術博客。主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還包含一些PHP語言等的實用例子。

對應的源代碼以下：

CSS部分代碼：

複製

#scroll-1 {
width:200px;
height:200px;
overflow:auto;
}
#scroll-1 div {
width:400px;
height:400px;
} #scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#FF7677;
}
#scroll-1::-webkit-scrollbar-track {
background:#FF66D5;
}
#scroll-1::-webkit-scrollbar-track-piece {
background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
}
#scroll-1::-webkit-scrollbar-thumb{
background:#FFA711;
border-radius:4px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#FF0BEE;
}

HTML結構：

複製

<div id='scroll-1'>
<div >
<p>請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術博客。主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還
包含一些PHP語言等的實用例子。</p>
<p>請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術博客。主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還
包含一些PHP語言等的實用例子。</p>
<p>請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術博客。主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還
包含一些PHP語言等的實用例子。</p>
<p>請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術博客。主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還
包含一些PHP語言等的實用例子。</p>
<p>請選擇Webkit內核的瀏覽器才能夠正常的看到滾動條的變化。
小天地，大世界是一個Web前端的技術博客。主要是關於
HTML 5,CSS 3,JavaScript,JQuery等。除此以外，還
包含一些PHP語言等的實用例子。</p>
</div>
</div>

經過以上，咱們幾乎就能夠來重寫網站的滾動條了，可是webkit提供的還有更多的僞類，能夠定製更豐富滾動條樣式。本文如下內容參考：https://www.webkit.org/blog/363/styling-scrollbars/

:horizontal horizontal 僞類，主要應用於選擇水平方向滾動條。
:vertical vertical僞類主要是應用於選擇豎直方向滾動條
:decrement decrement僞類應用於按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減少視窗的位置(好比，垂直滾動條的上面，水平滾動條的左邊。)
:increment increment僞類與和decrement相似，用來指示按鈕或內層軌道是否會增大視窗的位置(好比，垂直滾動條的下面和水平滾動條的右邊。)
:start start僞類也應用於按鈕和滑塊。它用來定義對象是否放到滑塊的前面。
:end 相似於start僞類，標識對象是否放到滑塊的後面。
:double-button 該僞類能夠用於按鈕和內層軌道。用於判斷一個按鈕是否是放在滾動條同一端的一對按鈕中的一個。對於內層軌道來講，它表示內層軌道是否緊靠一對按鈕。
:single-button 相似於double-button僞類。對按鈕來講，它用於判斷一個按鈕是否本身獨立的在滾動條的一段。對內層軌道來講，它表示內層軌道是否緊靠一個single-button。
:no-button 用於內層軌道，表示內層軌道是否要滾動到滾動條的終端，好比，滾動條兩端沒有按鈕的時候。
:corner-present 用於全部滾動條軌道，指示滾動條圓角是否顯示。
:window-inactive 用於全部的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該僞類也能夠用於::selection僞元素。webkit團隊有計劃擴展它並推進成爲一個標準的僞類)

另外，:enabled、:disabled、:hover、和:active等僞類一樣在滾動條中適用。

看了這些僞類，怎麼也沒有明白是什麼意思，仍是自已得寫的試試。實踐出真知嘛！你能夠擊接如下連接到官方演示DEMO（感受能夠學到不少東西的）：http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

下面我自已嘗試着去寫的DEMO，不要嫌它太醜就好。

查看DEMO 下載DEMO

三國平分，終歸一統

爲了一致的用戶體驗，有時咱們就不得不放棄使用部分瀏覽器提供的CSS接口來定製滾動條，轉而尋求更佳的代替方案。

其中的一中方案是使用jQuery插件，jquery-custom-content-scroller。使用插件的好處是顯而易見的，可是壞處也多得去了。要是您想了解jQuery-custom-content-scroller的具體使用方法，請移步到：http://manos.malihu.gr/jquery-custom-content-scroller/

下面我就jQuery滾動條插件的使用做一下簡單介紹：

第一步：在內容的頂部引入滾動條相應的樣式表文件和jquery的庫文件，jquery插件jquery.mcustomscrollbar文件。代碼以下：

複製

<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

第二步：在要顯示滾動條的元素（元素內容中必需要有溢出的塊，不然就不會出現滾動條）上面，加入class="content"，而後再加入如下代碼：

複製

<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>

關於此插件的詳細介紹，你能夠訪問官網，裏面講的至關詳細，我就再也不此多贅述

1. jq禁止滾動條滾動，隱藏滾動條
2. 滾動條
3. cv2滾動條
4. overflow滾動條
5. 滾動條（2）
6. HTML滾動條
7. scroll滾動條
8. position:fixed;滾動條
9. CSS滾動條
10. 【NGUI】滾動條
更多相關文章...
• ionic 滾動條 - ionic 教程
• jQuery Mobile 表單滑動條 - jQuery Mobile 教程
• 算法總結-滑動窗口
• SpringBoot中properties文件不能自動提示解決方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。