Edit in JSFiddle

Result
JavaScript
CSS
HTML

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


});

/* 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; }

<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>
                                <p>戸口の話

　弁護士のアッタスン氏は、いかつい顔をした男で、微笑なぞ決して浮かべたことがなかった。話をする時は冷ややかで、口数も少なく、話下手だった。感情はあまり外に出さなかった。やせていて、背が高く、そっけなくて、陰気だが、それでいて何となく人好きのするところがあった。気らくな会合などでは、とくに口に合った酒が出たりすると、何かしらとても優しいものが彼の眼から輝いた。実際、それは彼の話の中には決して出て来ないものであった。が、食後の顔の無言のシンボルであるその眼にあらわれ、また、ふだんの行いの中には、もっとたびたび、もっとはっきり、あらわれたのであった。彼は自分に対しては厳格で、自分ひとりの時にはジン酒を飲んで、葡萄酒をがまんした。芝居好きなのに、二十年ものあいだ劇場の入口をくぐったこともなかった。しかし他人にはえらく寛大で、人が元気にまかせて遊びまわるのを、さも羨ましげに、驚嘆することもあった。そして、彼らがどんな窮境に陥っている場合でも、とがめるよりは助けることを好んだ。「わたしはカインの主義＊が好きだよ、」と、彼はよくこんな妙な言い方をするのだった。「兄弟が自分勝手に落ちぶれてゆくのを見ているだけさ。」こんな工合だから、堕落してゆく人たちには最後まで立派な知人となり、最後までよい感化を与える者となるような立場にたつことは、よくあった。そして、そういう人々に対しても、彼らが彼の事務所へ出入りしている限り、ちっともその態度を変えなかった。
　もちろん、こういう芸当はアッタスン氏にとっては何でもないことであった。というのは、なにしろ感情をあらわさない男だったし、その友人関係でさえも同じような人のよい寛大さに基づいているらしかったので。ただ偶然にできた出来合いの友人だけで満足しているのは内気な人間の特徴であるが、この弁護士の場合もそうであった。彼の友人といえば、血縁の者か、でなければずうっと永い間の知り合いであった。彼の愛情は、常春藤
きずた
のように、時と共に成長したものであって、相手が友人として適当だというわけではなかった。彼の遠縁で、有名な粋人であるリチャード・エンフィールド氏との友情も、むろんそうして出来たものだった。この二人がお互いに何を認めることができたのか、あるいはどんな共通の話題を見出すことができたのかということは、多くの人々にとって解きがたい難問であった。日曜日に二人が散歩しているのに出会った人たちの話によると、二人は口も利かず、ひどくつまらなさそうな顔付きをしていて、誰か知人の姿を見るといかにもほっとしたように声をかけるのが常だということであった。そのくせ、その二人はこの日曜の散歩をとても大事にして、毎週の一番の大切なものと考え、それを欠かさずに楽しむためには、いろんな遊びをとりやめたばかりではなく、しなければならぬ用事までもふり捨てたのであった。
　そんな散歩をしていたある時のこと、二人がなにげなくロンドンのにぎやかな区域の横町を通りかかったことがあった。その横町はせまくて、まあ閑静な方だったが、それでも日曜以外の日には商売が繁盛していた。そこに住んでいる商人たちはみんな景気がよさそうであった。そして、みんなは競ってその上にも景気をよくしようと思い、儲けのあまりを惜しげもなく使って店を飾り立てた。だから、店々は、まるでにこやかな女売子の行列のように、客を招くような様子で道の両側にたち並んでいた。日曜日には、いつもの華やかな美しさも蔽われ、人通りも少なかったが、それでもその横町は、くすんだその付近とくらべると、森の中の火事のように照り映えていた。それに鎧戸は塗り換えたばかりだし、真鍮の標札は十分に磨き立ててあるし、街全体の調子がさっぱりしていて派手なので、すぐに通行人の眼をひき、喜ばせた。
　東へ向って行って左手の、一つの街かどから二軒目のところに、路地の入口があって、街並はくぎられていた。そしてちょうどそこに、気味の悪い一枚の建物が切妻
きりづま
を街路に突き出していた。その建物は二階建で、一階に戸口が一つあるだけ、二階は色のあせた壁だけで、窓は一つもなく、どこを見ても永いことよごれ放題にしてあった跡があった。ベルもノッカーも取付けてない入口の戸は、いたんで変色していた。浮浪人はそのひっこんだ戸口へのそりのそりと入り込んで戸の鏡板でマッチを擦り、子供たちは踏段の上で店を張って遊び、学校の生徒は繰形
くりがた
でナイフの切味を験
ため
したりした。そしてもう三十年近くの間、誰ひとり出て来て、そういう勝手な客たちを追い払ったり、彼らの荒した跡を修繕したりする者もなかった。
　エンフィールド氏と弁護士とは横町のその反対側を歩いていたが、路地の入口の真向いまでやって来ると、エンフィールド氏がステッキを上げて指した。
「あの戸口に気がついたことがありますか？」と彼は尋ねた。そして、相手がうなずくと、彼は言い足した、「あの戸口を見ると僕は妙な話を思い出すのです。」

</p>            
                               </div>
                        </div>
                    </div>