Решение (Част 1): Интерактивен Scrollbar

Описание на урока

Как работи интерактивният Scrollbar

Интерактивният Scrollbar се реализира чрез собствен клас, който създава отделни DOM елементи и поема контрола върху скролирането. Истинският скрол на браузъра остава активен, но е изместен извън видимата област, а ние визуализираме собствен Handle, който се синхронизира със съдържанието. Най-важното е, че позицията и размерът на плъзгача се изчисляват динамично според scrollTop и височината на съдържанието.

Стъпка по стъпка: изграждане на ScrollBar

1. Създаване на самoизпълняваща се функция и закачане на load събитие към window, което извиква Initialize.
2. Селектиране на нужните DOM елементи и създаване на нова инстанция на класа ScrollBar, подавайки body като параметър.
3. В конструктора се създават три елемента чрез createElement – Container, Content и Handle.
4. Чрез while цикъл всички childNodes на body се преместват в Content с appendChild.
5. Добавят се EventListener-и за:
   • скролиране (за синхронизиране на позицията на Handle)
   • animationend и transitionend (за преизчисляване на размера)
   • mousedown, mousemove, mouseup (за drag функционалност)
6. В Update() се преизчисляват размерът и позицията на Handle според offsetHeight и scrollTop.
7. При нужда се добавя или премахва клас Hidden, ако съдържанието не изисква скрол.

Основни използвани методи и свойства

• createElement – създава нов DOM елемент
• appendChild – премества елемент в нов родител
• addEventListener – закача слушател за събитие
• scrollTop – текуща вертикална позиция на скрол
• offsetHeight – реална височина на елемент

Този подход дава пълен контрол върху външния вид и поведението на скрола чрез JavaScript и CSS.