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 );

如何在水平滚动上触发事件？

1 个答案: