Scroll bar algorithm

Question

Hello guys.

I've been trying to create my own custom scroll bar implementation in JavaScript. It must emulate the look and behavior of MS Office 2007 I checked many solutions out there, but nothing satisfies my needs. My main problem is this: How to calculate a balance between the scroll bar height and the number of lines it will move the target page when itself dragged a pixel? In other words, a balance between the scroll bar precision and the space available to drag it up and down. Is there a ready algorithm for that to reuse? I searched the net but found nothing, quite strange for what must be a common coding problem?

Thanks!

Answer 1

this is how to calculate the top position of your scrollbar

scrollbar.style.top = element.scrollTop / (element.scrollHeight / element.style.height)

you can use this onscroll of your scroll element. vice versa, this works in the other direction, when you drag your scrollbar.

sorry for this quick'n'dirty answer, will provide more information later if you liked to.