Scrolling is one of the key parts of the browsing experience. Almost everyone who visits your app will know how to scroll up or down, so you might ask, why do you need JavaScript methods to scroll? The answer is simple. You may need to programmatically perform a scroll in response to certain events like button clicks or when the application mounts.

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.

scrollIntoView()

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

As previously mentioned, this method is called directly on DOM elements. In vanilla JavaScript, developers often use getElementById() method to access the element and store it in a variable. Then they can call scrollIntoView() on that variable.

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.

scrollTo()

This is another method for programmatic scrolling in JavaScript. Unlike the previous method, scrollTo() is called directly on window interface. In essence, window is a global variable that refers to currently opened tab (window) in the browser. You can use it to define a specific position to set the scroll position. If scrollIntoView() needs an element to work off of, scrollTo() allows you to scroll down by specific number of pixels. It also has the option to scroll across, which we do not use.

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.