В этой статье я хотел бы показать, как определить горизонтальное и вертикальное движение прокрутки с помощью JavaScript.

Это может быть полезно, если вы хотите выполнить какие-то действия при прокрутке. Например, если вы хотите показать всплывающее окно.

Вертикальная прокрутка

Одним из самых простых способов обнаружения вертикальной прокрутки является использование window.scrollY.

const scroll = window.scrollY // Get scroll position

Используя этот метод, вы можете проверить положение прокрутки окна и использовать его по своему усмотрению.

Вертикальная прокрутка в VueJs

Обнаружение прокрутки в VueJs может немного отличаться от простого JavaScript, и для того, чтобы получить те же результаты, вы должны использовать «уничтожить» и «создать».

Как это работает?

destroyed() {
  window.removeEventListener('scroll', this.actionScroll);
},
created() {
  window.addEventListener('scroll', this.actionScroll);
}
methods:{
actionScroll (event) {
  const scroll = window.scrollY; 
  console.log(scroll) // shows pixel position of window scroll
  // You can also perform any action while using this method
}
}

Горизонтальная прокрутка

На простом JavaScript вы можете снова использовать ту же систему window.scroll, но на этот раз вам придется использовать scrollX.

const scroll = window.scrollX

Горизонтальная прокрутка в VueJs

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

Что я сделал, чтобы решить эту проблему и как на самом деле мы можем обнаружить горизонтальную прокрутку элемента в VueJs?

Прежде всего, у нашего элемента должен быть идентификатор, чтобы его можно было найти среди других, или в моем случае я использовал $refs, что значительно упрощает его.

<div 
     id="scroll-div" 
     ref="scrollDiv"
>

Затем, чтобы иметь возможность получить горизонтальную позицию прокрутки, вам нужно создать функцию в «mounted» и получить scrollLeft элемента.

const scroll = this.$refs.scrollDiv; // We found the div
scroll.addEventListener('scroll', () => {
  const scrollPosition = this.$refs.scrollDiv.scrollLeft;
  console.log(scrollPosition) 
// We saved the scroll position and check it with console log for any further actions 
}, false)

Вот и все! 😊

Надеюсь, эта статья была для вас полезной, если вы оказались в такой же ситуации, как и я.