Hello. I write here a script for a custom scrollbar. There is a problem.

If the height of the list is not very large, but there is a large amount of text in the scrolling area, the height of the scrollbar will be very small.

An example can be found here <---

I tried to increase it with some kind of multiplier.

this.scroll.style.height = this.scrollWrap.clientHeight * container.clientHeight / container.scrollHeight * 10 +'px';

But in this case, when scrolling to the bottom, the scroll takes a wrong position. I can not understand how to calculate the coefficient for scrolling positioning. The one that this.scroll.style.top

Tell me how to properly implement.

  • As I understand it, the problem is with the height of the slider? If so, then decide on the minimum comfortable height of the slider and, starting from this height, multiply-divide not the height, but the scroll pitch. - UModel

1 answer 1

I took away from the progress of the slider the difference between the scroll height specified via CSS and the height that the script counts. And now everything is pixel to pixel)

 let scrollHeight = (scrollWrap.clientHeight * scrollVis.clientHeight / scrollVis.scrollHeight); let scrollTop = (scrollWrap.clientHeight - 30 + scrollHeight) * scrollVis.scrollTop / scrollVis.scrollHeight;