Javascript自定義滾動條

Question

我有下面的代碼來顯示自定義滾動條。這裏顯示了一些背景，而不是我需要顯示1px的細線圖像。我該怎麼做？我現在用的是TinyScroller

的CSS：

#wrapper_1 {width:99%; height:600px; padding:2px} 
#scroll_1 {position:relative; width:99%; height:600px; overflow:auto} 
#scrollcontent_1 {position:absolute; width:94%; z-index:200} 
#scrollbar_1 {float:right; position:relative; border:0; display:none; width:15px; height:600px; z-index:100; background:url(images/scroll-bg.png)} 
.scroller_1 {position:relative; top:0; cursor:pointer; border:0; width:15px; background-image:url(images/scroller.png); background-position:50% 50%; background-repeat:no-repeat} 
.buttonclick_1 {} 

代碼：

<div id="wrapper_1"> 
<div id="scroll_1"> 
<div id="scrollcontent_1"> 
<h1>TinyScroller</h1> 
<p>test message</p> 
</div> 
<div id="scrollbar_1"> 
<div id="scroller_1" class="scroller_1"></div> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
TINY.scroller.init('scroll_1','scrollcontent_1','scrollbar_1','scroller_1','buttonclick_1'); 
</script> 

Answer 1

那麼如果你是在Chrome中，你可以使用純醇」 CSS：

::-webkit-scrollbar { 
    width: 15px; 
    height: 15px; 
} 

::-webkit-scrollbar-track { 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 0 0 0 4px; 
} 

::-webkit-scrollbar-thumb { 
    background-color: rgba(0, 0, 0, .2); 
    background-clip: padding-box; 
    border: solid transparent; 
    border-width: 1px 1px 1px 6px; 
    min-height: 28px; 
    padding: 100px 0 0; 
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07); 
} 

::-webkit-scrollbar-corner { 
    background: transparent; 
} 

::-webkit-scrollbar-button { 
    display: none; 
} 

演示： http://jsfiddle.net/maniator/ysgBy/
要結帳的網站：http://css-tricks.com/custom-scrollbars-in-webkit/

Answer 2

據商務部 http://www.scriptiny.com/2009/09/javascript-scrollable-div/

我覺得你的HTML是不正確的。

<div id="wrapper_1"> 

<div id="scroll_1"> 
    <div id="scrollcontent_1"> 
     <h1>TinyScroller</h1> 
     <p>test message</p> 
    </div> 
    <div id="scrollbar_1"> 
     <div id="scroller"></div> 
    </div> 
</div>