TinyScroller - Прокручивающийся DIV

jаvascript реализующий прокрутку div и весом в 1,92 Kb. Может быть использован в любом HTML документе. Дизайн настраивается в CSS.

HTML

<div id="wrapper">
    <div id="scroll">
        <div id="scrollcontent">
            <h1>История создания jQuery</h1>
            <p>HTML была одной из первых вещей, которую Джон Резиг освоил, когда он только начал заниматься программированием. Резиг программировал на QBasic, когда один его знакомый показал ему, как создать веб-страницу (используя Angelfire), а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его.</p>
            <p>Но страсть к jаvascript пришла значительно позже, примерно в 2004 году. Тогда Резиг получал степень в области компьютерных наук и работал на полставки в местной фирме Brand Logic. Он занимался дизайном сайта, в котором создавался пользовательский скроллинг. Джон был разочарован и расстроен, особенно потому, что использовал код других разработчиков, после чего решил серьезно изучить jаvascript. Изучив, пришел к выводам, что jаvascript — это простой, но изящный язык, который является невероятно мощным для решения многих задач. В течение ближайших пары лет Д. Резиг создал множество различных jаvascript приложений, прежде чем закончить создание jQuery. Основной целью создания jQuery Резиг видел возможность закодировать многоразовые куски кода, которые позволят упростить jаvascript и использовать их так, чтобы не беспокоиться о кросс-браузерных вопросах. Библиотека была представлена общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.</p>
        </div>
        <div id="scrollbar">
            <div id="scroller" class="scroller"></div>
        </div>
    </div>
</div>

CSS

#wrapper {
    width:400px; 
    height:200px; 
    margin:40px auto; 
    background:#fff; 
    border-top:4px solid #eee; 
    border-left:4px solid #eee; 
    padding:20px
}
#scroll {
    position:relative; 
    width:400px; 
    height:200px; 
    overflow:auto
}
#scrollcontent {
    position:absolute; 
    width:375px; 
    z-index:200
}
#scrollbar {
    float:right; 
    position:relative; 
    display:none; 
    width:15px; 
    height:200px; 
    z-index:100; 
    background:url(images/scroll-bg.gif)
}
.scroller {
    position:absolute; 
    top:0; 
    width:15px; 
    cursor:pointer; 
    background-color:#ccc; 
    background-image:url(images/scroll-arrows.gif); 
    background-position:50% 50%; 
    background-repeat:no-repeat
}
.buttonclick {
    background-color:#bbb
}

JS

Для инициализации прокручиваемого DIV используется следующий код:

TINY.scroller.init('scroll','content','scrollbar','scroller','active')

Функция TINY.scroller.init включает 5 параметров: id родительского DIV для контента, id DIV контента, id DIV прокрутки, id кнопки прокрутки, класс кнопки прокуртки в активном состоянии (опционально).
К выше указанному примеру, код будет таким:

<script type="text/jаvascript"> 
    TINY.scroller.init('scroll','scrollcontent','scrollbar','scroller','buttonclick');
</script>