Как сделать кастомный scrollbar для списка, используя js?

Question

[Itvanya]

Всем привет, друзья. Учусь писать кастомный скроллбар на чистом js. Проблема в том, что никак не могу понять алгоритм того, как двигать скроллбар
Структура html такая :

<div class="wrapper">
  <ul class="list">
    <div class="list-scroller"></div>
    <li class="list-item">text content</li>
    <li class="list-item">text content</li>
    <li class="list-item">text content</li>
  </ul>
</div>

Кол-во .list-item произвольное и их суммарное количество обычно высотой около 1000px, .list имеет фиксированную высоту 300px, position:relative и overflow:hidden, что позволит мне самостоятельно скролить элемент, используя мой скроллбар. Сам скроллбар позиционирован абсолютно относительно .list и прижат к правому боку(как любой нормальный скроллбар).

Суть в том, что мой скроллбар идеально двигается, ударяясь об границы и останавливаясь, но я не могу понять, как создать зависимость scrollTop для .list от моего скроллбара, чтобы scrollTop двигался симметрично моему скроллбару. Т.е. чтобы все было так, как и в обычном скроллбаре. Я пробовал сделать так :

list.scrollTop = parseInt(scrollBar.style.top) * (list.scrollHeight/list.clientHeight) ;

Т.е. попылся двигать scrollTop относительно моего скролбара. Оно вышло - список скоролится, но сам скроллбар за ним не успевает, потому что он абсолютно позиционирован.

Буду очень благодарен тому, кто даст наводку, как связать list.scrollTop и scrollbar.style.top так, чтобы они двигались правильно относительно друг друга(скроллбар двигался по клиентской высоте контейнера .list, а list.scrollTop при это двигался относительно полной своей высоты .list.scrollHeight). Спасибо.

Answer 1

[_ _]

Ну потому что у вас должна быть пропорция.

var scrollBarHandleHeight = scrollBar.offsetHeight;
var scrollBarHandleTop = +scrollBar.style.top;
var listHeight = list.clientHeight;
var scrollPosition = scrollBarHandleTop / (listHeight - scrollBarHandleHeight); 
list.scrollTop = (list.scrollHeight - list.clientHeight) * scrollPosition;

Comments

[Itvanya]

Александр Марченко, спасибо за ответ. Если учитывать, что я отсчитываю свой scrollBar.style.top = e.pageY - list.getBoundingClientRect().top - shiftY + 'px' . shiftY фиксируется при клике на скролбар, т.е. это обычный отступ, чтобы элемент не прыгал с начальной точки.
Сейчас попробовал ваше решение - не подходит :(

[Itvanya]

Александр Марченко небольшие подсчеты :
listScrollHeight = 500
listClientHeight = 200
scrollBarHeight = 100
то при scrollBar.style.top == 200,
scrollPosition = 200 / (200 - 100) == 2
list.scrollTop = (500 - 200) * 2 == 600

=> т.е. пропорция не верна, т.к. скроллБар и скроллТоп, учитывая такие позиции, должны быть ровно на середине

[_ _]

Itvanya: listClientHeight - высота вашего окна, в котором происходит скролл.
scrollBar.style.top - top ползунка.
scrollBarHeight - высота ползунка
Ползунок, упираясь нижней границей в нижнюю границу list, будет иметь top = 100
Следовательно, максимально возможный scrollBar.style.top это 200 - 100 = 100. Как он у вас 200, я слабо себе представляю