Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

Scrolling a React Element into View

May 26, 2020
typescriptreact

A use case

Occasionally we build pages where we want to alert the user to something, but it may be outside their view. An example is a long form with a vertical scrollbar, with a field error out of view after the form is submitted.

Try this example in CodeSandbox. Put “bad” in Field 1, scroll to the last field, and click Save. Field 1 contains an error, but you probably can’t see it until you scroll back up.

In this case, we want to automatically scroll the problem field into the users view to improve the user experience.

scrollIntoView

There is a method called scrollIntoView that exists on HTML elements that we can use that is supported on all modern browsers. This method will scroll the element’s parent container so that it becomes visible to a user.

Nice!

Using scrollIntoView in React

How do we use scrollIntoView in React? We don’t usually call DOM element methods imperatively in the React world!

Well, we start by getting references to the elements we want to call scrollIntoView on. These elements are the div containers for each field in our example.

const Field = ({ ... }: FieldProps) => {
  const fieldRef = React.useRef<HTMLInputElement>(null);  return (
    <div className="field" ref={fieldRef}>      ...
    </div>
  );
};

We use the useRef hook to put a reference to the div in a variable called fieldRef.

We can then use the useEffect hook to invoke this method when the field has an error:

const Field = ({ ... }: FieldProps) => {
  const fieldRef = React.useRef<HTMLInputElement>(null);
  React.useEffect(() => {    if (error && fieldRef.current) {      fieldRef.current.scrollIntoView();    }  }, [error]);  return ...
};

We put the error prop in the useEffect dependency array so that the effect function is invoked every time the error changes. Inside the effect function, we access the field div element using fieldRef.current and call scrollIntoView when there is an error, and we have reference to the div.

That’s it! The problem field is automatically scrolled to when the Save button is clicked.

Smooth transition

There is a minor improvement we can make, to make the scrolling smoother. scrollIntoView takes in a scrollIntoViewOptions object parameter. Within that object there is a behavior property that we can set to "smooth":

fieldRef.current.scrollIntoView({
  behavior: "smooth",
});

Note that scrollIntoViewOptions isn’t available on IE and Safari at the time of writing this post. So, we won’t see this minor improvement in those browsers.

That completes this example of scrolling a React element into view. The final example is in CodeSandbox at https://codesandbox.io/s/scrollntoview-fn0bb?file=/src/index.tsx

Learn TypeScript

NEW!🎉LIMITED LAUNCH DISCOUNT

An interactive course for JavaScript developers who want to learn modern TypeScript

  • Learn to use TypeScript's amazing type system with your existing JavaScript skills to boost your productivity
  • Over 70 interactive tutorial style lessons
  • Quizzes in each chapter to reinforce knowledge
  • Covers beginner topics through to advanced
Learn TypeScript
Find out more