Use scroll event in a specific element

Question

Fala Pessoal!

I wonder if it is possible to accomplish something like in the code below:

const elemento = elemento.document.querySelector(".elemento")

elemento.addEventListener("scroll", () => {
  // funçao aqui
})

Or is it possible only with window?
Because it didn’t work. Any idea what might be wrong?

Answer 1

I don’t know if I got it right, but you can spot the event scroll of a single element.

In the example I have a div with overflow:auto, in the scroll performs a function...

let elemento = document.querySelector(".elemento")

elemento.addEventListener("scroll", () => {
  document.body.style.background = 'red'
  console.log('scroll na div');
})

.elemento {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
}

<div class="elemento">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At iusto asperiores dolore, totam ex alias pariatur rerum? Sequi iure laudantium quaerat, quibusdam necessitatibus saepe nesciunt accusamus autem architecto asperiores, nobis id officiis atque, error aliquid reprehenderit cupiditate porro at ipsum dignissimos voluptate tempora. Quia ea, nesciunt modi suscipit fuga adipisci ipsa quos qui amet eligendi atque ad libero? Nobis odit laudantium, itaque eum ratione labore eaque repellendus libero ipsam rerum, perspiciatis soluta perferendis officia accusantium mollitia nihil assumenda doloribus cumque, similique quisquam doloremque commodi nemo vel? Deserunt nostrum alias incidunt consequuntur laudantium velit qui expedita, dignissimos possimus modi error corporis.</div>