Полоса прокрутки на JS

Полосу лучше в отдельный фрейм. Собственно так и делают.
Плюс свойства scroll, scrollBy и scrollTo объекта window.

 

очень давно нарисовал:

Код (Text):

1.  
2. <script>
3. function scroll(obj, order,increase, delay, length) {
4.     if (!increase) increase = 1
5.     if (!delay) delay = 1
6.     var pos = (increase < 0) ? increase * -1 : increase
7.     pos = Math.ceil(length/pos)
8.     var first = order ? obj.scrollLeft : obj.scrollTop
9.     function doScroll() {
10.         if (length && pos-- <= 0) {
11.             clearInterval(obj.interval)
12.             return;
13.         }
14.         if (order) obj.scrollLeft += increase
15.         else obj.scrollTop += increase
16.         if ((order ? obj.scrollLeft : obj.scrollTop) !== first + increase) clearInterval(obj.interval)
17.         first = order ? obj.scrollLeft : obj.scrollTop
18.     }
19.     if (obj.interval) clearInterval(obj.interval)
20.     obj.interval = setInterval(doScroll, delay)
21. }
22. </script>
23.  
24. <div id="scrollDiv" style="overflow: hidden; width: 9em; height: 3em; border: 1px solid Silver; text-align: center; white-space: nowrap;">
25.     <script>for(i=0; i<100; i++) document.write('text text text '+i+' text text text text text text text text text text text text text text text text text text<br>')</script>
26. </div>
27.  
28. <script>
29. function stopScroll(obj) {
30.     function stopScroll() {
31.         clearInterval(obj.interval)
32.         document.onmouseup = null
33.         document.body.onmouseout = null
34.     }
35.     document.onmouseup = function() {stopScroll()}
36.     document.body.onmouseout = function() {stopScroll()}
37. }
38. </script>
39.  
40. <input type="button" value="вниз"
41.     onmousedown="scroll(scrollDiv, 0, 1)"     onmouseup="clearInterval(scrollDiv.interval)"     onmouseout="clearInterval(scrollDiv.interval)"
42.     onkeydown="scroll(scrollDiv, 0, 1)"     onkeyup="clearInterval(scrollDiv.interval)" >
43.  
44.  
45. <input type="button" value="Влево" onclick="scroll(scrollDiv, 1, -1)">
46. <input type="button" value="Вправо"  onclick="scroll(scrollDiv, 1, 1)">
47.  
48. <input type="button" value="Стоп!" onclick="clearInterval(scrollDiv.interval)">
49. <br>
50. <input type="button" value="Вниз"  onclick="scroll(scrollDiv, 0, 1)">
51. <input type="button" value="Вверх" onclick="scroll(scrollDiv, 0, -1)">
52. <br>
53. помедленее
54. <input type="button" value="Вниз"  onclick="scroll(scrollDiv, 0, 1, 100)">
55. <input type="button" value="Вверх" onclick="scroll(scrollDiv, 0, -1, 100)">
56. <br>
57. быстрее
58. <input type="button" value="Вниз"  onclick="scroll(scrollDiv, 0, 10)">
59. <input type="button" value="Вверх" onclick="scroll(scrollDiv, 0, -10)">
60. <br>
61. рывками
62. <input type="button" value="Вниз"  onclick="scroll(scrollDiv, 0, 20, 1000)">
63. <input type="button" value="Вверх" onclick="scroll(scrollDiv, 0, -20, 1000)">
64. <br>
65. <input type="button" value="Вниз 20px"  onclick="scroll(scrollDiv, 0, 1, 1, 20)">
66. <input type="button" value="Вверх 20px" onclick="scroll(scrollDiv, 0, -1, 1, 20)">
67. <br>
68. <input type="button" value="Вниз на экран"  onclick="scroll(scrollDiv, 0, 1, 1, scrollDiv.offsetHeight)">
69. <input type="button" value="Вверх на экран" onclick="scroll(scrollDiv, 0, -1, 1, scrollDiv.offsetHeight)">
70.  
71. ----------------------------------------
72. scroll(obj, [order=0, [increase=1, [delay=1, [length=null]]]])
73.  
74. параметры:
75. obj      - кого скролим?
76. order    - напрпвление X|Y
77.               если равно null, false, 0 и т.д. - вертикальный скролл
78. increase - по сколько пикселей скролить?
79.               Отрицательное число скролит в обратную сторону
80. delay    - задержка в мсек.
81. length   - общая длина скорла.
82.               если меньше increase, проскролится на increase px
83.               если равно null, false, 0 и т.д. то до скролиться будет до конца
84.  
85. если юзверь начнёт скролить своими богатырскими силушками, автоматический скролл выключается