adding a class when the box has a scroll

Question

I need help adding a class to a div when it has an active scroll. This is a list that changes depending on the user - sometimes there are so few things there that the scroll does not appear, but in some situations the scroll does.

I found a script, but it involves adding a class when the user reaches a certain point in the box (setting it to 0 is not what I'm looking for, because the user has to hover over the box first anyway), and I need a script that works regardless of this. Is something like this possible?

Answer 1

 const usersList = document.getElementById("usersBox");

    function handleBoxResize() {
        if (usersList.scrollHeight > usersList.clientHeight) {
            usersList.classList.add('your-class');
        } else {
            usersList.classList.remove('your-class');
        }
    }

    handleBoxResize();

    var observer = new ResizeObserver(handleBoxResize);
    observer.observe(usersList);