<style type="text/css">
.Container {
position: absolute;
top: 50px; left: 100px;
width: 400px;
height: 200px;
background: #FFF url(/images/container_background.gif) no-repeat;
}
#Scroller-1 {
position: absolute;
overflow: hidden;
width: 400px;
height: 200px;
}
#Scroller-1 p {
margin: 0; padding: 10px 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-indent: 20px;
color: #6F6048;
}
.Scroller-Container {
position: absolute;
top: 0px; left: 0px;
}
#Scrollbar-Container {
position: absolute;
top: 40px; left: 60px;
}
.Scrollbar-Up {
cursor: pointer;
position: absolute;
}
.Scrollbar-Track {
width: 20px; height: 161px;
position: absolute;
top: 36px; left: 4px;
background: transparent url(/images/scrollbar_track.gif) no-repeat center center;
}
.Scrollbar-Handle {
position: absolute;
width: 20px; height: 22px;
}
.Scrollbar-Down {
cursor: pointer;
position: absolute;
top: 187px;
}
</style>
<script type="text/javascript" src="/src/jsScroller.js"></script>
<script type="text/javascript" src="/src/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>

<div id="Scrollbar-Container">
    <img src="/images/up_arrow.gif" class="Scrollbar-Up" />
    <img src="/images/down_arrow.gif" class="Scrollbar-Down" />
<div class="Scrollbar-Track">
     <img src="/images/scrollbar_handle.gif" class="Scrollbar-Handle" />
</div>
</div>
<div class="Container">

<div id="Scroller-1">
<div class="Scroller-Container">

<p>
აქ ჩაწერეთ სასურველი ტექსტი
</p>
</div>
</div>