JS Scroll: создание плавной прокрутки страниц на JavaScript

JS Scroll – это техника, которая позволяет отслеживать прокрутку страницы и реагировать на это событие. С помощью JS Scroll можно создавать интерактивные элементы на странице, которые появляются или скрываются при достижении определенной части страницы пользователем.

Примеры использования JS Scroll:

1. Анимация элементов при прокрутке. Например, вы можете анимировать заголовки и изображения, чтобы они появлялись по мере того, как пользователь прокручивает страницу.

javascript
window.addEventListener('scroll', function() {
  var elementsToShow = document.querySelectorAll('.show-on-scroll');
  for (var i = 0; i < elementsToShow.length; i++) {
    var elem = elementsToShow[i];
    if (isElementInViewport(elem)) {
      elem.classList.add('is-visible');
    } else {
      elem.classList.remove('is-visible');
    }
  }
});
function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

2. Плавная прокрутка к определенной части страницы. Это может быть полезно, если у вас есть длинная страница и пользователь может потеряться в ней.

javascript
var scroll = new SmoothScroll('a[href*="#"]', {
  speed: 500
});

3. Отслеживание прокрутки для изменения элементов в зависимости от положения пользователя на странице. Например, вы можете изменить навигационное меню, чтобы активный элемент менялся в зависимости от того, на какой части страницы находится пользователь.

javascript
window.addEventListener('scroll', function() {
  var sections = document.querySelectorAll('section');
  var currentSection = '';
  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var top = section.offsetTop;
    var height = section.offsetHeight;
    if (pageYOffset >= top - height / 3) {
      currentSection = section.getAttribute('id');
    }
  }
  document.querySelector('.active').classList.remove('active');
  document.querySelector('a[href*=' + currentSection + ']').classList.add('active');
});

Как видите, JS Scroll - очень полезный инструмент для создания интерактивных элементов на странице. Он помогает улучшить пользовательский опыт и делает вашу страницу более привлекательной.