How to make scroll linked effects for firefox?

Viewed 20

I have been making a website with a 3D section where is a specific point, that where you scroll, the site will not scroll, instead the 3D section will change position of certain 3D elements. The website is made with Three.js (for the 3D section), node and webpack.

THE PROBLEM: When the website is viewed on firefox it throws out a warning that: This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html for further details and to join the discussion on related tools and features! and the scrolling effect does not work. I also want to say, that in every other browser I've tested it worked flawlessly...

The code for the effect looks like this:

const newsScroll = (e) => {
    if(e.clientX - sizes.width/2 > -(1.1 * dpi) && e.clientX - sizes.width/2 < (1.1 * dpi) && e.clientY + window.scrollY < sizes.height/2){
        if(e.deltaY){
            e.preventDefault()
            //move stuff
        }
    }
}

document.getElementsByClassName("webgl")[0].addEventListener("mousewheel", newsScroll, {
    passive: false,
})

If anyone knows how to fix this please reply!

0 Answers
Related