如何更改滾動條樣式

Question

我想知道如何將自定義滾動條添加到表（項目表）。 我已經寫下了下面的代碼。一旦添加了10個項目，就會出現滾動條，但我喜歡自定義滾動窗格（例如：像fb中的滾動條）。

<form action="#" method="get"><style type="text/css">.carttable{width: 252px;height: 200px;overflow: auto;} 

Answer 1

頭：

<script type="text/javascript" id="sourcecode"> 
$j=jQuery.noConflict(); 
$j(function() 
{ 
    $j('.scroll-pane').jScrollPane({ 
    showArrows: true, 
    autoReinitialise: true}); 
}); 
</script> 

CSS

/*樣式具體到這個特定頁面*/

.scroll-pane 
{ 
width: 100%; 
height: auto; 
overflow: auto; 
} 

/* * CSS樣式是neede d通過jScrollPane使其正常運行。 * *將此樣式表包含在您的網站中，或將以下樣式複製並粘貼到您的樣式表中 - jScrollPane *可能無法在沒有它們的情況下正常運行。 */

.jspContainer { 
overflow: hidden; 
position: relative; 
} 

.jspPane { 
position: absolute; 
} 

    .jspVerticalBar { 
    background: none repeat scroll 0 0 none; 
    height: 100%; 
    position: absolute; 
    right: 0; 
top: 0; 
width: 16px; 
} 
    .jspHorizontalBar { 
background: none repeat scroll 0 0 none; 
bottom: 0; 
height: 16px; 
left: 0; 
position: absolute; 
width: 100%; 
} 


.jspVerticalBar *, .jspHorizontalBar * { 
margin: 0; 
padding: 0; 
} 

.jspCap { 
display: none; 
} 
.jspHorizontalBar .jspCap { 
float: left; 
} 
.jspTrack { 
background: url(scroll-images/groen-streepje.png) 0 0 repeat-y scroll; 
position: relative; 
} 

.jspDrag { 
background: none repeat scroll 0 0 #ACC314; 
cursor: pointer; 
left: 0; 
position: relative; 
top: 0; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { 
float: left; 
height: 100%; 
} 

    .jspArrow { 
    background: url(scroll-images/pijltjes.png) 0 0 no-repeat scroll; 
cursor: pointer; 
display: block; 
text-indent: -20000px; 
    } 

    .jspArrow.jspDisabled { 
    background: url(scroll-images/pijltjes.png) 0 -9px no-repeat scroll; /* ander kleur pijltje */ 
cursor: default; 
    } 

.jspVerticalBar .jspArrow { 
height: 9px; 
} 

.jspHorizontalBar .jspArrow { 
float: left; 
height: 100%; 
width: 16px; 
    } 

.jspVerticalBar .jspArrow:focus { 
outline: medium none; 
    } 

.jspCorner { 
background: none repeat scroll 0 0 #EEEEF4; 
float: left; 
height: 100%; 
} 

* html .jspCorner { 
margin: 0 -3px 0 0; 
} 

.jspArrowUp 
{ 
background-position: 0 0; 
} 

.jspArrowDown 
{ 
background-position: -15px 0 !important; /* twee pijlen in één png zetten */ 
} 
.jspArrowDown.jspDisabled { 
background-position: -15px -9px !important; /* twee pijlen in één png zetten */ 
} 
.scroll-pane 
{ 
width: 100%; 
overflow: auto; 
z-index: 99; 
} 

Answer 2

Cmacu的Nicescroll 3建議工作得非常好！你試過了嗎？它具有許多不錯的功能，可以個性化條形的外觀並支持橫條，它支持桌面和移動版本上的許多瀏覽器。你可以在這裏找到一些例子：Live Examples。 下載文件在HTML文件中有許多其他示例，因爲您知道它是如何工作的。

只需在jQuery之後將加載腳本標記放在標題上，然後在加載頁面時調用該函數。

HTML

<script type="text/javascript" src="jquery.nicescroll.js"></script> 

JavaScript文件

$(document).ready(

    function() { 

    $("html").niceScroll({cursoropacitymax:0.6, cursorwidth:10px, horizrailenabled:false}); 

    } 

); 

對於個性化你必須通過在功能上與上述實施例的輸入的滾動條的外觀。您可以在主頁末尾的「配置參數」部分找到所有可用輸入。