I created this scroll effect, where
div is divided into left and right side – left side contains of images, that change based on scroll position and it’s fixed and right side is scrolling content.
This is my idea:
To describe the sandbox – you can see that my scroll effect works, but right div scrolls only when mouse is on that right div, what I need is that content of that right div will scroll down also when mouse is on left div
I tried to make the whole container’s position
fixed so it doesn’t move, but it did not work. Is there a way how to achieve it?
Here is example of what I would like it to be like:
(starts with STEP 1)
To achieve your goal in React, you need a combination of some CSS and the JS scroll event. First, assign
position: sticky to the element you need to be fixed when it’s about to leave the viewport. Then, using a React ref, you access the scroll position of the scrollable div and use that logic to set your image source (you should avoid accessing the DOM directly with
getElementById in React).
Here’s a working codesandbox example