In this article, we want to discuss two methods – scrollIntoView and scrollTo, and how to use them to manually set scroll position in React. You can find the example here.
This is a method available for all DOM elements through their prototype. React elements are shadow clones of real HTML elements, so you can use scrollIntoView() to scroll to elements in React. You might have a question – what if I want to scroll to a specific section of the page (for example, bottom of the page)? You don’t have to create a component to scroll to a specific area.
Instead, scrollIntoView() takes an options object where you can specify where and how to scroll. There are three properties you can use:
behavior to specify the type of animation for moving the scroll position. You can set smooth for smooth scrolling animation, instant for quick jump to the position, and auto to automatically determine the type of animation.
Block option specifies relative vertical alignment of the scroll position. You can use start to position scroll at the top of the element, or end to position it at the bottom. By default, React will use start. This option is useful to implement features like scroll to bottom. In this case, you create a container to wrap the entire page, and use this option to scroll to bottom of the div. As a result, the application scrolls down of the entire application.
inline option is rarely used, as it specifies the horizontal position of the scroll. Modern applications usually don’t (or shouldn’t) have horizontal alignment, so this option is not necessary.
Using scrollIntoView() in React
React works a little differently. You need to use create a ref to store a reference to a DOM element in React. Then you can call the scrollIntoView() method on the variable that contains a ref. Creating a ref is a simple process, but different depending on whether you’re using class or function components.
Best use cases for scrollIntoView()
This method is best used when you want to set scroll position to a specific DOM element. For example, you want to highlight a certain element as soon as the application loads (mounts). Then you can add scrollIntoView() into lifecycle methods (or use the useEffect hook) and accomplish this. Or set a custom onClick event handler that calls the scrollIntoView() to highlight a specific element.
This method is also useful for implementing a scroll to bottom or scroll to top feature. The block property in the options object allows you to specify which end of an element to set scroll position on. You can create a container that wraps all elements on the page, and scroll to its top or bottom edge.
This method also takes the options object, which specifies scrolling animation, as well as the number of pixels to scroll down or across.
Advantage of scrollTo() method is that you don’t have to create refs in React, which might save you some lines of code. Window global variable is accessible in any web application that runs in the browser. This includes React applications, even if there are several layers of abstraction like virtual DOM.
Similar to the other method, you can embed the scrollTo() method in an useEffect hook or lifecycle methods. You can create a custom onClick event handler to set scroll position to a specific location. Often you need a button that scrolls to bottom or top of the page.
scrollTo() vs scrollIntoView()
Both methods seemingly do the same thing – scroll to a specific position. Important difference is that scrollIntoView() scrolls to a specific element, and scrollTo() scrolls down by a specific number of pixels. You can also think of two methods as a bus and a metro. scrollIntoView(), like a bus, can move to one of the elements. It can not stop between two elements, like a bus can not stop between two stops. scrollTo() is like a taxi, its position can be set to any vertical coordinate.
Extra libraries to scroll in React
These two methods are not the only way to implement scrolling feature in React. Packages like react-scroll facilitate implementing this feature. We recommend using a custom package for advanced use cases, not normal scrolling features.
Make container scrollable
Developers can alternatively create a scrollable container and scroll to its bottom. For example, create a chat and scroll to its bottom whenever users enter a new message. Article on SimpleFrontEnd about scroll to bottom feature explains exactly how to scroll to bottom of the chat. There are also examples on how to scroll to bottom of a table.
Handle scroll events
In some cases, you may need to internally keep track of current scroll position. For example, to run a scrolling function if user reaches a certain area. In this case, you can use addEventListener() method to add a custom event handler for scroll events. You can also use the useEffect() hook to remove the event listener after component unmounts.