@yaroslavklimuk

Скролл с остановкой для анимации на нативном JS?

Интересует как без использования сторонних бибилиотек сделать такой эффект.
Страница скроллится до определенной секции, затем скролл страницы останавливается, а прокрутка колесиком мыши/тачпадом выполняет какую либо анимацию (как скролл на месте). И пока анимация (например в секции есть слайдер) не пройдет до конца, страница дальше не скроллится, а лишь после выполнения всей анимации или показа всех слайдов (надеюсь понятно описал эффект). Т.е. событие прокрутки перестает прокручивать страницу, а лишь двигает какой-то элемент. В гугле смог найти только плагины вроде fullpage.js.
  • Вопрос задан
  • 454 просмотра
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Как вариант, прокручивать невидимый пустой высоченный div.
Контент держать в другом div, position: fixed;, положение его менять программно по событию "scroll".

Когда скролл доходит до высоты, где должна быть анимация, движение контента приостанавливается.
Когда вышли из зоны анимации, движение продолжается, с поправкой на пропущенную высоту:
document.addEventListener('scroll', () => {
  let offset = window.scrollY;
  const start = 685; // начало стоп-зоны в px
  const stop = 1000; // конеч стоп-зоны
	if (offset >= start && offset < stop) {
    offset = start; // стоим на месте
  } else if (offset >= stop) {
    offset -= (stop - start); // продолжаем движение
  }
  content.style.top = `-${offset}px`; // позиционируем контент
});


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы