My ThreeJS Demo works on my Laptop but not on others

I wanted to scroll jack my site but I’m using window.scrollTo which will not work on it

Scroll event is basically prone to re-rendering. So I just happen to found a script on GitHub GitHub - akinuri/scroll: Listens to scroll events: start, scroll, and end. which detects when the scroll is over and then I just use gsap to scrollTo Plugin to move both pageYOffset and GLB animation time.

const windowScrollTo = (number) => {
      gsap.to(window, {duration: 0.5, scrollTo: windowHeight * number, ease: "circ.out"});
    };

This was unstable especially for trackpad so later I had to switch to wheel event.

Edit - I found this one which is more stable but it’ll have same issue as above mentioned

@drcmda Finally I got what was the problem and fixed it. It was indeed scrolling issue rather than threejs’s fault.

I was calculating vh by this formula

let scrollPosition = Math.floor(
    (window.scrollY / window.innerHeight) * 100
);

Since, I was creating snap scroll with wheel event at every 100vh the problem was that window.scrollY / window.innerHeight * 100 never gave me perfectly 100 on my chrome (which is what I only test on initially). It was like 99.568 so basically I was rounding it off to 99, 199, so on and hoped that it’ll work the same across all the browser but yesterday I found out the that Edge was perfectly giving vh multiple of 100.

On the other hand, Firefox and Brave were showing both the values 99’s and 100’s. So I had to adjust the values to both 99’s and 100’s.

With this I did learn not to single handedly rely on just one browser and test it across other browser as well since every browser behave little differently.

So now if you go here - Nasa Black Marble - Experientia then it should be working as intended.

1 Like

Welcome to reality. :sweat_smile:

1 Like

lol, yeah…

1 Like