Скроллбар, как сделать свой?
 

Штатный несколько выбивается из дизайна, поэтому решил сделать свой.
Знаю, на jquery можно но хочется ручками.
Предполагается реализация следующего характера:
Список (скажем, 10 позиций), прокручивается (перемещается), по hover-у на кнопках вверх вниз. В dive отображаются тиолько четыре позиции. А остальные, за пределами, скрываются. Сам список представляет собой отдельный div. Собственно, как реализовать сокрытие позиций за пределами diva и обозначить ему остановку, когда произошла прокрутка "до упора" (второе можно сделать высчитав конкретную позицию в пикселах, но хочется более универсальный способ)?

Универсального способа нет, окончание прокрутки нужно будет вычислять вручную, в зависимости от размера и количества элементов.
Скрыть элементы можно при помощи CSS-свойств clip: rect(top right bottom left); или overflow: hidden;

<style type="text/css">
ul.srollable {
position: absolute;
top: …px;
left: …px;
width: 320px;
height: 240px;
clip: rect(0 320px 240px 0);
}
</style>

<ul class="scrollable">
     <li>…</li>
     <li>…</li>
     <li>…</li>
</ul>

или

<style type="text/css">
ul.srollable {
height: 240px;
overflow: hidden;
}
</style>

<ul class="scrollable">
     <li>…</li>
     <li>…</li>
     <li>…</li>
</ul>

Спасибо.