スクロールバーを変えるやつ

by kachibito

HTML

<script src="http://kachibito.net/wp-content/uploads/2011/11/jquery.tinyscrollbar.min_.js"></script>
<div id="scrollbar1">
                        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                        <div class="viewport">
                            <div class="overview">
                                <h3>ジーキル博士とハイド氏の怪事件</h3>
                               ...

CSS

/* clears */
.col-content:after
{ clear:both; content:"."; display:block; font-size:0; height:0; line-height:0; overflow:hidden; }




/* Examples - Tiny Scrollbar */
#scrollbar1 { width: 520px; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url() no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(../images/design/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:15px; position: relative; }
#scrollbar1 .thumb { background: transparent url(http://kachibito.net/wp-content/themes/kachi3/images/Gear.png) no-repeat ; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0;  }
#scrollbar1 .thumb .end { background: transparent url(../images/design/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }

JavaScript

//Initialize
$(document).ready(function() {
    //Example 1
    var oScroll1 = $('#scrollbar1');
    if (oScroll1.length > 0) {
        oScroll1.tinyscrollbar();
    }


});