Как узнать направление прокрутки при срабатывании события?

Question

[Максим]

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

Нужно, чтобы колбек срабатывал только при пересечении цели '.main' верхней границы вьюпорта.
Когда цель '.main' пересекает верхнюю границу вьюпорта:
- при прокрутке вниз не добавляется класс 'scroll-up',
- при прокрутке вверх добавляется класс 'scroll-up'

p.s. '.main' больше высоты вьюпорта

Нашел такой скрипт, но он работает при верхнем и нижнем пересечении

const element = document.querySelector('.navbar');
const target = document.querySelector('.main');
const thresholdArray = steps => Array(steps + 1).fill(0).map((_, index) => index / steps || 0);

let previousY = 0;
let previousRatio = 0;

const handleIntersect = entries => {
	entries.forEach(entry => {
		const currentY = entry.boundingClientRect.y;
		const currentRatio = entry.intersectionRatio;
		const isIntersecting = entry.isIntersecting;

		// Scrolling down/up
		if (currentY > previousY && isIntersecting) {
			if (currentRatio < previousRatio) {
				element.classList.add('scroll-up');
			} else {
				element.classList.add('scroll-up');
			}
		} else if (currentY < previousY) {
			if (currentRatio > previousRatio && isIntersecting) {
				element.classList.remove('scroll-up');
			} else {
				element.classList.remove('scroll-up');
			}
		}

		previousY = currentY;
		previousRatio = currentRatio;
	})
}

const observer = new IntersectionObserver(handleIntersect, {
	root: null,
	rootMargin: '0px',
	threshold: thresholdArray(20)
})

observer.observe(target)

Answer 1

[Алексей Ярков]

Вложенные if/else бестолковые. Одно и то же действие выполняется.

Comments

[Максим]

Спасибо! Очень помогли..

[Максим]

Вот так скрипт был изначально:

// Scrolling down/up
    if (currentY < previousY) {
      if (currentRatio > previousRatio && isIntersecting) {
        state.textContent ="Scrolling down enter"
      } else {
        state.textContent ="Scrolling down leave"
      }
    } else if (currentY > previousY && isIntersecting) {
      if (currentRatio < previousRatio) {
        state.textContent ="Scrolling up leave"
      } else {
        state.textContent ="Scrolling up enter"
      }
    }

текст появлялся при верхнем и нижнем вхождении, в зависимости от направления прокрутки

[Максим]

Зачем писать в ответ бесполезные слова? Комментируйте

[Алексей Ярков]

Максим, в вашем примере текст отличается, а в коде из вопроса вы вместо текста подставили действия, а подумать что написали забыли.

[Максим]

Не понимаю, что в моем вопросе вам не понятно?

Answer 2

[Vefolio]

В JavaScript существует несколько способов определения направления прокрутки при срабатывании события. Один из них - использование свойств scrollTop и scrollLeft элемента, на котором происходит прокрутка, и сравнение их значений с предыдущими значениями.

Например, можно определить направление прокрутки при событии scroll на элементе window следующим образом:

let lastScrollTop = 0;
window.addEventListener("scroll", function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop) {
    console.log("Прокрутка вниз");
  } else {
    console.log("Прокрутка вверх");
  }
  lastScrollTop = scrollTop;
});

В этом примере мы определяем значение scrollTop на элементе window и сравниваем его со значением lastScrollTop, которое мы сохраняем в глобальной переменной. Если значение scrollTop больше, чем lastScrollTop, то происходит прокрутка вниз, иначе - прокрутка вверх.

Аналогичным способом можно определить направление прокрутки на любом другом элементе с прокруткой, например, на элементе с классом "scrollable":

javascript

let lastScrollTop = 0;
let scrollable = document.querySelector(".scrollable");

scrollable.addEventListener("scroll", function() {
  let scrollTop = scrollable.scrollTop;
  if (scrollTop > lastScrollTop) {
    console.log("Прокрутка вниз");
  } else {
    console.log("Прокрутка вверх");
  }
  lastScrollTop = scrollTop;
});

Здесь мы определяем значение scrollTop на элементе с классом "scrollable" и сравниваем его со значением lastScrollTop. Если значение scrollTop больше, чем lastScrollTop, то происходит прокрутка вниз, иначе - прокрутка вверх.

Comments

[Максим]

Спасибо за ответ. Но меня интересует решение с Observer

[Vefolio]

Максим, Чтобы узнать направление прокрутки при срабатывании события прокрутки, можно использовать Observer в сочетании с некоторыми свойствами элемента.

Создайте экземпляр класса IntersectionObserver, передав в него функцию обратного вызова (callback), которая будет вызываться при изменении состояния наблюдаемого элемента.
javascript

const observer = new IntersectionObserver(callback);

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

const target = document.querySelector('#my-element');

Зарегистрируйте элемент для наблюдения с помощью метода observe:
javascript

observer.observe(target);
В функции обратного вызова (callback) можно использовать свойства IntersectionObserverEntry, чтобы определить направление прокрутки.
javascript

function callback(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Проверяем, находится ли элемент в зоне видимости
      if (entry.boundingClientRect.top < entry.rootBounds.top) {
        // Элемент прокручивается вверх
      } else {
        // Элемент прокручивается вниз
      }
    }
  });
}

Не забудьте отменить наблюдение, когда элемент перестанет быть нужным, вызвав метод unobserve:
javascript

observer.unobserve(target);
Таким образом, используя IntersectionObserver и некоторые свойства элемента, вы можете определить направление прокрутки при срабатывании события.

[Максим]

Vefolio, Если правильно сделал, то не работет (

const target = document.querySelector('.main');
const element = document.querySelector('.navbar');
const observer = new IntersectionObserver(callback);


function callback(entries) {
	entries.forEach(entry => {
		if (entry.isIntersecting) {
			// Проверяем, находится ли элемент в зоне видимости
			if (entry.boundingClientRect.top < entry.rootBounds.top) {
				// Элемент прокручивается вверх
				element.classList.add('scroll-up');
			} else {
				// Элемент прокручивается вниз
				element.classList.remove('scroll-up');
			}
		}
	});
}
observer.observe(target);
observer.unobserve(target);

Скрыть / показать заголовок при прокрутке вниз / вверх, используя чистый JavaScript с IntersectionObserver

Все мы знаем https://wicky.nillia.ms/headroom.js/, который является отличным виджетом для отображения / скрытия заголовка при прокрутке вниз / вверх. Я бы использовал этот виджет, но мои случаи использования немного отличаются.

Я пытаюсь построить это сейчас с IntersectionObserver.