Navigate back to the homepage

How to make a div scrollable in react js?

Infinitbility
React
March 19th, 2022 · 1 min read
keep affilitate

Hi 👋,

Welcome To Infinitbility! ❤️

Today, we will learn to create scrollable div in react js using CSS with examples of vertically and horizontally scrollable.

So, we are Going to make a scrollable div 👇

Table of content

  1. Scrollable div vertically example
  2. scrollable div horizontally example

Scrollable div vertically example

To make a vertically scrollable div we have to write a fixed height of div and it will make a vertically scrollable div.

In the below example, I have added 👇 following CSS to make beautiful vertically scrollable div.

1.scrollable-div {
2 background-color: #f1f1f1;
3 height: 150px;
4 overflow: auto;
5 margin: 20px;
6 text-align: justify;
7 padding: 20px;
8}

And in react component

1import "./styles.css";
2
3export default function App() {
4 return (
5 <div className="App">
6 <h1>Scrollable div vertically example</h1>
7 <div className="scrollable-div">
8 Lorem Ipsum is simply dummy text of the printing and typesetting
9 industry. Lorem Ipsum has been the industry's standard dummy text ever
10 since the 1500s, when an unknown printer took a galley of type and
11 scrambled it to make a type specimen book. It has survived not only five
12 centuries, but also the leap into electronic typesetting, remaining
13 essentially unchanged. It was popularised in the 1960s with the release
14 of Letraset sheets containing Lorem Ipsum passages, and more recently
15 with desktop publishing software like Aldus PageMaker including versions
16 of Lorem Ipsum. It is a long established fact that a reader will be
17 distracted by the readable content of a page when looking at its layout.
18 The point of using Lorem Ipsum is that it has a more-or-less normal
19 distribution of letters, as opposed to using 'Content here, content
20 here', making it look like readable English. Many desktop publishing
21 packages and web page editors now use Lorem Ipsum as their default model
22 text, and a search for 'lorem ipsum' will uncover many web sites still
23 in their infancy.
24 </div>
25 </div>
26 );
27}

Output

scrollable div horizontally example

To make a horizontally scrollable div we have to write overflow-x: scroll; with white-space: nowrap; ( in the case of text content ) and it will make a horizontally scrollable div.

In the below example, I have added 👇 following css to make a beautiful vertically scrollable div.

1.scrollable-div {
2 background-color: #f1f1f1;
3 overflow-x: scroll;
4 white-space: nowrap;
5 margin: 20px;
6 text-align: justify;
7 padding: 20px;
8}

And in react component

1import "./styles.css";
2
3export default function App() {
4 return (
5 <div className="App">
6 <h1>Scrollable div horizontally example</h1>
7 <div className="scrollable-div">
8 Lorem Ipsum is simply dummy text of the printing and typesetting
9 industry. Lorem Ipsum has been the industry's standard dummy text ever
10 since the 1500s, when an unknown printer took a galley of type and
11 scrambled it to make a type specimen book.
12 <br />
13 It has survived not only five centuries, but also the leap into
14 electronic typesetting, remaining essentially unchanged. It was
15 popularised in the 1960s with the release of Letraset sheets containing
16 Lorem Ipsum passages, and more recently with desktop publishing software
17 like Aldus PageMaker including versions of Lorem Ipsum.
18 <br />
19 It is a long established fact that a reader will be distracted by the
20 readable content of a page when looking at its layout. The point of
21 using Lorem Ipsum is that it has a more-or-less normal distribution of
22 letters, as opposed to using 'Content here, content here', making it
23 look like readable English.
24 <br />
25 Many desktop publishing packages and web page editors now use Lorem
26 Ipsum as their default model text, and a search for 'lorem ipsum' will
27 uncover many web sites still in their infancy.
28 </div>
29 </div>
30 );
31}

Output

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to use history in reactjs functional component?

React, use history for navigating in functional component.

March 13th, 2022 · 1 min read

How to filter array of objects with another array of objects in javascript?

Example of filter array of objects by another array of objects in javascript.

March 12th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]