Search code examples
javascripthtmlscrollscrollbar

Javascript eventListener of scroll dosen't work

I added an eventListener of 'scroll' to an element and it's not working.

If I use onscroll="myFunction()" on the p tag and then I access it, it works just fine.

Where is the problem?

Thanks!

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>

Solution

  • The problem was that I'm using VUE js and my HTML tag was defined into the div with the id of #app and aparently VUE js, somehow, deactivates the addEventListener if you do like this.

    SOLUTION

    I put my javascript into VUE mounted() and it works.