This content originally appeared on Level Up Coding - Medium and was authored by Jacob Do
Scroll to a newly added DOM element
The premise — a parent component renders child components based on some local state and we wish to scroll to the first of those newly rendered child components.
TLDR: Here is a link to codesandbox.
See the parent component below — right now, it does everything, but the scrolling part. It has an “Add items” button, which — when pressed-add 10 more items to the existing state of items:
There are two crucial pieces of information that we need to achieve that:
- The index of the first of these newly added items
- The fact that the item that we wish to scroll to has mounted
Track index of first newly added item
For this, we will use useRef hook which gives as an instance variable that we can use to store values between renders. Then, as we will add news items to the items state variable, we will measure the length of previousItems that we receive as an argument in the callback function that we pass to setItems . If we add +1 to this length, we will get the index of the first recently added item:
Scroll to the new item on mount
To scroll to the item, we actually need to break out the element that we render for each item in the items state and we need to do that because we need to hook into it’s own lifecycle i.e. track when it is mounted.
A component is considered mounted when it is added into the real DOM (you can see it when you pop open your dev tools and can find a dom node representing that component in the “Elements” tab).
In class-based components, we would reach for the componentDidMount lifecycle method, but in the world of hooks, the child component that renders the item will look like this:
When rendering items , we need to somehow tell the first “new” instance of the child component that viewport should be scrolled to. For that, we will pass a shouldScrollTo as follows:
Here we simply compare if the item that we are rendering has the same index as the firstNewItemIndex to tell that Child instance that it should be scrolled to after it has mounted.
Finally, we need to use the shouldScrollTo to, well, actually scroll and we do so as follows:
And there we have it — now every time new items are added, the app will automatically scroll to the first one in the most recent set added.
Scroll to newly added element was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Jacob Do
Jacob Do | Sciencx (2021-11-29T01:13:05+00:00) Scroll to newly added element. Retrieved from https://www.scien.cx/2021/11/29/scroll-to-newly-added-element/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.