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

Question

У меня есть div внутри моей страницы, который можно прокручивать по горизонтали. Я делаю индикатор прокрутки для этого элемента в Javascript.

Когда я пытаюсь document.getElementsByClassName('flickity-viewport')[0].onscroll вместо window.onscroll, он вообще не работает :( (в консоли я получаю Uncaught TypeError: Cannot set property 'onscroll' of undefined)

Также пробовал .addEventListener("scroll", myFunction), но он не работает и отправляет Uncaught TypeError: Cannot read property 'addEventListener' of undefined в консоли.

window.onscroll = function() {myFunction()};

function myFunction() {
          var winScroll = document.getElementsByClassName('flickity-viewport')[0].scrollLeft || document.getElementsByClassName('flickity-viewport')[0].scrollLeft;
          var height = document.getElementsByClassName('flickity-viewport')[0].scrollWidth - document.getElementsByClassName('flickity-viewport')[0].clientWidth;
          var scrolled = (winScroll / height) * 100;
          document.getElementById("myBar").style.width = + scrolled + "%";
}

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

У кого-нибудь есть решение? :)

Спасибо!

Answer 1

Ошибка консоли говорит вам, что элемент, к которому вы пытаетесь присоединить функцию прослушивателя, это undefined.

Ошибка аналогична, независимо от того, используете ли вы elem.onscroll или elem.addEventListener, потому что в обоих случаях проблема заключается в селекторе элементов.

Просто введите document.getElementsByClassName('flickity-viewport')[0] в консоли разработчика и убедитесь, что элемент действительно существует (и не возвращает undefined).

Чем вы можете изменить свою функцию следующим образом:

function myFunction( event ) {
    var winScroll = event.target.scrollLeft;
    var height = event.target.scrollWidth - event.target.clientWidth;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = + scrolled + "%";
}

Теперь он использует event.target вместо повторения getElementsByClassName. Событие автоматически передается слушателем scroll функции обратного вызова myFunction.

Теперь просто прикрепите функцию так, как вам нравится:

var elem = document.getElementsByClassName('flickity-viewport')[0]; // Make sure this doesn't return undefined

elem.onscroll = myFunction;

// or

elem.addEventListener('scroll', myFunction );