How to add/remove a scroll event using resize observer

Viewed 21

I want to trigger the scroll event when the browser window is 75rem and greater and remove it when the window is smaller.

This only works but doesn't watch for window size change:

    const mql = window.matchMedia("(min-width: 75rem)")
    const thumb = document.querySelector(".entry-figure")
    const rate = 0.5

    if (mql.matches) {
        document.addEventListener("scroll", () => {
            thumb.style.opacity = (100 / window.scrollY) * rate
        })
    }

I tried the following, but it fails:

mql.addEventListener( "change", (e) => {
    if (e.matches) {
        document.addEventListener("scroll", () => {
            thumb.style.opacity = (100 / window.scrollY) * rate
        })
    }
})
0 Answers
Related