Skip to content
react

How to scroll into view in React

Nov 10, 2021Abhishek EH5 Min Read
How to scroll into view in React

In this article, we will discuss 2 different ways to scroll into a view in React.

Project Setup

First, create a react project by running the following command:

1npx create-react-app react-scroll-into-view

Scrolling using pure HTML and CSS

Update the index.css with the following styles:

1body {
2 max-width: 900px;
3 margin: 10px auto;
4}
5
6.App {
7 display: flex;
8 justify-content: center;
9 flex-direction: column;
10}
11.section {
12 height: 100vh;
13}
14
15header {
16 display: flex;
17 justify-content: center;
18}
19
20ul {
21 margin: 0;
22 padding: 0;
23 list-style-type: none;
24 display: flex;
25 position: fixed;
26 top: 0;
27 background-color: white;
28}
29li a {
30 padding: 1rem;
31 text-decoration: none;
32}

Now update the App.js with the following code:

App.js
1function App() {
2 return (
3 <div className="App">
4 <header>
5 <ul>
6 <li>
7 <a href="#home">Home</a>
8 </li>
9 <li>
10 <a href="#products">Products</a>
11 </li>
12 <li>
13 <a href="#services">Services</a>
14 </li>
15 <li>
16 <a href="#about-us">About Us</a>
17 </li>
18 </ul>
19 </header>
20 <div className="section" id="home">
21 <h2>Home</h2>
22 <p>
23 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
24 Nisi officia, placeat, enim quibusdam nostrum similique atque
25 accusantium natus sit molestias minima voluptates eos doloribus illum
26 ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
27 asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
28 Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
29 molestiae ipsa nulla! Est aspernatur eius corrupti.
30 </p>
31 </div>
32 <div className="section" id="products">
33 <h2>Products</h2>
34 <p>
35 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
36 Nisi officia, placeat, enim quibusdam nostrum similique atque
37 accusantium natus sit molestias minima voluptates eos doloribus illum
38 ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
39 asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
40 Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
41 molestiae ipsa nulla! Est aspernatur eius corrupti.
42 </p>
43 </div>
44 <div className="section" id="services">
45 <h2>Services</h2>
46 <p>
47 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
48 Nisi officia, placeat, enim quibusdam nostrum similique atque
49 accusantium natus sit molestias minima voluptates eos doloribus illum
50 ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
51 asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
52 Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
53 molestiae ipsa nulla! Est aspernatur eius corrupti.
54 </p>
55 </div>
56 <div className="section" id="about-us">
57 <h2>About Us</h2>
58 <p>
59 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
60 Nisi officia, placeat, enim quibusdam nostrum similique atque
61 accusantium natus sit molestias minima voluptates eos doloribus illum
62 ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
63 asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
64 Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
65 molestiae ipsa nulla! Est aspernatur eius corrupti.
66 </p>
67 </div>
68 </div>
69 )
70}
71
72export default App

As you can see in the code, we have a header with links to 4 different sections. We have given the id of each section as the value of the href attribute (eg: <a href="#products">Products</a>). We have also added a height of 100vh to the sections so that they occupy the entire height of the screen and the scrolling is visible correctly.

Now if you run the app and click on one of the menu items, you will see that you are scrolled into that section. However, you will observe that when you click on the menu, it just jumps into that section. You might want your user to have a nicer experience like a smooth scroll. You can add that by adding the following CSS:

1html {
2 scroll-behavior: smooth;
3}

Now if you run the application, you will be able to see smooth scrolling. You can also test the application here.

Smooth scrolling is not yet supported in Safari. You can check the browser support details here.

Scrolling using useRef hook

If you do not want to give ids and want to use a reference, you can do that by using the following code:

WithRef.js
1import React, { useRef } from "react"
2
3const App = () => {
4 const paraRef = useRef(null)
5 const clickHandler = () => {
6 paraRef.current &&
7 paraRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
8 }
9 return (
10 <div>
11 <button onClick={clickHandler}>Scroll to Next para</button>
12 <p className="section">
13 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
14 repudiandae ut tempore laudantium, provident labore doloremque sit
15 magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
16 reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
17 earum asperiores ut, hic voluptates libero sed consequuntur facere
18 itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
19 nam eum minima quasi temporibus. Non?
20 </p>
21 <p className="section" ref={paraRef}>
22 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
23 repudiandae ut tempore laudantium, provident labore doloremque sit
24 magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
25 reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
26 earum asperiores ut, hic voluptates libero sed consequuntur facere
27 itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
28 nam eum minima quasi temporibus. Non?
29 </p>
30 <p className="section">
31 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
32 repudiandae ut tempore laudantium, provident labore doloremque sit
33 magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
34 reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
35 earum asperiores ut, hic voluptates libero sed consequuntur facere
36 itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
37 nam eum minima quasi temporibus. Non?
38 </p>
39 </div>
40 )
41}
42
43export default App

Here we have used the useRef hook to create a reference to the section to which we want to scroll. When the button is clicked we are calling the scrollIntoView method of the reference.

In the block option, you can specify 'end' to scroll to the end of the section and 'center' to scroll into the center of the section.

You can view a working demo here.

Do follow me on twitter where I post developer insights more often!

Leave a Comment

© 2021 CodingDeft.Com