卷轴的Javascript eventListener不工作

Question

我在元素中添加了一个eventListener of‘滚动’，但它不起作用。

如果我在p标记上使用了，然后访问它，它就能正常工作。

问题出在哪里？

谢谢!

​

const myDiv = document.querySelector('#hScroll')
const customInfo = document.querySelector('#customInfo')

console.log(customInfo)

customInfo.addEventListener('scroll', () => {
    console.log('yup');
})

<div id="hScroll" class="container-fluid asd position-relative ps-3 pe-3 fadeEndB fadeStartB">
  <p id="customInfo" class="custom-info overflow-auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
  </p>
</div>

​

Answer 1

问题是，我使用的是VUE js，我的标记被定义到带有#app id的div中，如果您这样做，VUE js会以某种方式使addEventListener失效。

溶液

我将我的javascript放入VUE挂载()中，它就能工作了。

Answer 2

因为元素中没有滚动事件(即P)。

试试这段代码，你就会发现我的意思。

​

const myDiv = document.querySelector('#hScroll')
const customInfo = document.querySelector('#customInfo')

console.log(customInfo)

customInfo.addEventListener('scroll', () => {
    console.log('yup');
})

<p id="customInfo" class="custom-info overflow-auto" style="width:60px; height:60px; overflow-y:auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
  </p>

​

Answer 3

回调函数必须接受一个事件参数。

customInfo.addEventListener('scroll', (ev) => {
    console.log('yup');
})