Как высчитать коэффициент для расчета позиционирования скроллбара?

Question

[Александр Флоренко]

Всем привет. Пишу тут скрипт для кастомного скроллбара. Есть проблема.

Если высота списка не очень большая, но при этом большое количество текста в области скролла, то высота скроллбара будет очень маленькая.

Пример можно посмотреть тут <---

Пытался увеличивать его каким то множителем.

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

Но в таком случае при скролле в самый низ, скролл принимает не правильную позицию. Не могу понять как рассчитать коэффициент для позиционированния скролла. Тот что this.scroll.style.top

Подскажите как правильно реализовать.

Comments

[RAX7]

У тебя высота ползунка скрола дробная, если округлить вниз, то все норм

[Сергей delphinpro]

было бы не лишним ограничивать минимальную высоту ползунка. неудобно хватать мышкой, когда он слишком маленький.

[Александр Флоренко]

RAX7, Что то не видно, что бы было норм.
Ползунок все так же маленький.

[Александр Флоренко]

Сергей delphinpro, Ну вот я это и пытаюсь сделать.
Проблема в том, что если я изменяю высоту ползнука, то при скролле в самый низ он слишком опускается

[Сергей delphinpro]

Александр Флоренко, а тут достаточно просто. за 100% хода ползунка нужно принимать не весь скроллбар, только часть от верха полоски до верха ползунка в нижнем положении. Иначе говоря 100% минус высота ползунка. Вот и всё.

[Александр Флоренко]

Сергей delphinpro, то есть мне вообще не нужно в таком случае высоту ползунка считать?
А положение топ сделать так?

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

[Александр Флоренко]

Сергей delphinpro, разобрался.

Отнял разницу между высотой моего ползунка, и высотой которая высчитывается. И теперь все пиксель в пиксель)

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

Answer 1

[Александр Флоренко]

Как посоветовал Сергей delphinpro отнял от хода ползунка разницу между высотой скролла заданную через CSS и высотой, которую считает скрипт.
И теперь все пиксель в пиксель)

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