Hi there. I'm using React Three Drei ScrollControls and Scroll html to contain scrollable html content in my Three.js canvas. The problem I have is that when I navigate to the previous page, the page correctly lands on the specific section of the page I was scrolled on. However, the vertical scrollbar is aligned at the top instead of matching the position of the page it was scrolled on. When scrolling within the page, the vertical scrollbar does move, matching the current section of the page.

I took a look at my inspector. The transform property of my div is automatically generated by the Scroll html element, which reflects the position of the screen I'm on.

I've tried adjusting overflow properties, otherwise, I'm not exactly sure how to approach this problem.

::-webkit-scrollbar is the vertical scrollbar element used