Attach scroll event handler to an dynamically created element

Question

I'm using simplescroll bar (SSB), which adds wrappers around my scroll content on page load. And I need to attach an event listener, which would work on scroll.

Without SSB a simple

document.querySelector(".element").parentNode.addEventListener('scroll', handler);

did work. But now it doesn't work, since the right .parentNode doesn't exist yet, it will be added later on by SSB in background (I don't know when, I don't know how and I have no control on it).

How do I attach scroll handler to dynamically created (not by me) element?

With a click event I do use a function like this

function addPostponedEventListener(selector, eventName, handler)
{
    document.addEventListener(
        eventName, 
        e => 
        {
            const el = e.target;
        
            if (el.closest(selector))
            {
                handler();
            }
        }
    )
}
addPostponedEventListener('.element', 'scroll', handler);

but it works only with bubbling, and bubbling seems to be disabled for scroll event, so it doesn't work.

Answer 1

Thanks to this answer I was able to do it:

function addPostponedEventListener(selector, eventName, handler)
{
    let interval = setInterval(() => 
    {
        let el = document.querySelector(selector);
        if (el)
        {
            el.addEventListener(eventName, handler);
            clearInterval(interval);
        }
    }, 100);
}