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

Плавен scroll и синхронизирана навигация – как работи всичко заедно

Най-важното в този урок е логиката зад smooth scroll ефекта и синхронизирането му с менюто. Вместо директно преместване към anchor, позицията се изчислява на стъпки, като всеки път се изминава 1/4 от оставащото разстояние, докато се достигне целта. Менюто се маркира при клик и се демаркира при ръчно скролиране. Допълнително се следи кои елементи са във видимата част на екрана, за да се стартират анимации.

Стъпка по стъпка: как е реализиран ефектът

1. Инициализира се scrollbar и навигацията чрез публичен initialize, който приема линковете и контейнера.
2. На всеки линк се добавя click логика, която слуша за scroll събитие.
3. Запазва се началната scroll позиция (scrollFrom) и крайната позиция на anchor (scrollTo).
4. Стартира се setTimeout (40 ms), който извиква функция за плавно придвижване.
5. Изчислява се scrollStep = (scrollTo - currentPosition) / 4.
6. Ако стойността стане твърде малка, се използва ±1, за да се гарантира достигане на целта.
7. При достигане на крайната позиция менюто се демаркира при ново ръчно скролиране.
8. Класът за анимации (singleton) следи scroll, animationend и transitionend, за да активира или рестартира анимации според видимостта на елементите.

Използвани ключови методи и събития

• addEventListener – добавя слушатели за scroll, click, animationend, transitionend.
• setTimeout – изпълнява функция през интервал (40 ms) за плавен ефект.
• clearTimeout – предотвратява натрупване на таймери.
• scrollTop – задава текущата вертикална позиция на контейнера.
• classList.add() / classList.remove() – контролира CSS класове за стартиране на анимации.