Scroll JS - библиотека для скроллинга на сайте

JavaScript-скрипты, которые работают с функцией прокрутки (scroll) браузера, можно называть scroll js. Они позволяют управлять прокруткой элементов страницы, добиться плавной и анимированной прокрутки, а также организовать обработку событий прокрутки, например, для реализации ленивой загрузки контента.

Вот несколько примеров JavaScript-скриптов для работы с прокруткой страницы и элементов:

1. Скрипт для плавной прокрутки страницы к якорю при щелчке на ссылку:

javascript
const links = document.querySelectorAll('a[href^="#"]');
for (const link of links) {
  link.addEventListener('click', function (e) {
    e.preventDefault();
    const id = this.getAttribute('href').substring(1);
    document.getElementById(id).scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  });
}

2. Скрипт для проверки, находится ли элемент в зоне видимости при прокрутке страницы:

javascript
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}
const elements = document.querySelectorAll('.my-element');
for (const element of elements) {
  if (isElementInViewport(element)) {
    console.log(`${element.id} is in the viewport`);
  } else {
    console.log(`${element.id} is not in the viewport`);
  }
}

3. Скрипт для изменения фона при прокрутке страницы:

javascript
const section = document.querySelector('.my-section');
window.addEventListener('scroll', function () {
  const scrollPosition = window.pageYOffset;
  if (scrollPosition >= 500) {
    section.style.backgroundColor = '#f00';
  } else {
    section.style.backgroundColor = '#fff';
  }
});

Таким образом, JavaScript-скрипты для работы с прокруткой (scroll js) могут улучшить пользовательский опыт и функциональность веб-сайтов. Они дают возможность контролировать прокрутку элементов, создавать эффекты и анимации при скроллинге, а также обрабатывать события прокрутки для выполнения дополнительных задач.