如何更改滚动条样式

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

    } 

); 

对于个性化你必须通过在功能上与上述实施例的输入的滚动条的外观。您可以在主页末尾的“配置参数”部分找到所有可用输入。