Hi all!
I’ve been trying to figure out why my page has an ‘infinite scroll’ problem.
When scrolling the page you can infinitely scroll into nothing on the ‘x’ and ‘y’ axes.
(Also interesting is why is the ‘x’ axis scrollbar even active)
The code is based on the 'multiple elements’ example.
Also: Setting ‘overflow: hidden’ on the body element is not an option, because we’re using this project in an embedded form.
Pretty interesting bug.
The canvas size should be set relative to the parent like 100% and not in fixed-size like 922px, like in your case.
If you translate a fix sized object, the page size would keep on increasing(but apparently only with a mouse, not trackpad). So just set the width and height of the canvas to 100% in CSS and it will work.
Also remember that threejs set’s the canvas size in renderer.setSize, so you might have to pass in false there for updateStyle. I have wasted a lot of time ignoring that and getting weird CSS results.
Hi!
When using setSize with updateStyle = false the infinite scrolling is fixed!
Now the ‘width’ and ‘height’ is set to 100% as it should be.
A small bug that appeared is this:
It seems they’re now coming out of their frames for some reason…
(Also the x axis scrollbar is still visible for some reason. But it doesn’t scroll into infinity anymore.
Edit: Updated the demo code & deploy
Edit 2: Replaced
renderer.setSize(window.innerWidth, window.innerHeight, false); with
renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
Now the right empty space disappeared, the top one is still there
Remove the width: 100vw to remove the x scrollbar.
For the alignment, I am not sure but I see your boxes are each 2px more than what’s specified in the CSS. So I guess you can try to use outline instead of border or experiment with display and box-sizing CSS properties
It seems the scrollbar caused the white space above the elements, because when I removed the width: 100vw the scrollbar and the white space both disappeared…
I don’t know why would the scrollbar cause a problem like this.
But it doesn’t scroll into infinity anymore.