How to create a responsive scrollbox in CSS ? - GeeksforGeeks

22 Dec, 2020
The purpose of this article is to create a responsive scrollbar in HTML page structure using CSS.
In CSS, responsive scroll box is an interaction technique which contains text, images, or any other elements. They can be scrolled in preset directions, which allows users to scroll if the contents are larger for the box. Scroll boxes are often used when you don’t want to take up plenty of space with your content. By creating a scroll box, you provide more contents to fit into smaller space.
Approach: To create a responsive scroll box, add a <div> tag and then proceed to create the scroll box. All you need to do is to choose the height and width of the scroll box (make sure that the height of your box is short enough so that you have an overflow of the text, allowing  box to scroll down. Add overflow: auto to create a scrolling effect. 
Now, you have formatted the text box, you are ready to add content. Format the content of the text box, just like you would do on your HTML page. Once you have added all content, close your <div> tag. You have created a scroll box and your page will instantly look more systematic. 
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta name="viewport" content=        "width=device-width, initial-scale=1">      <style>        table {            border-collapse: collapse;            border-spacing: 0;            width: 100%;            border: 0px solid #ddd;        }                  th,        td {            text-align: left;            padding: 8px;        }          /* width */                ::-webkit-scrollbar {            width: 10px;        }          /* Track */        ::-webkit-scrollbar-track {            background: #f1f1f1;        }          /* Handle */        ::-webkit-scrollbar-thumb {            background: #888;        }          /* Handle on hover */        ::-webkit-scrollbar-thumb:hover {            background: #555;        }                  .scroll {            display: block;            border: 0px solid red;            padding: 5px;            margin-top: 5px;            width: 100%;            height: 100px;            overflow-y: scroll;        }    </style></head>  <body>    <div class="scroll">        <p>            With the idea of imparting programming             knowledge, Mr. Sandeep Jain, an IIT             Roorkee alumnus started a dream,             GeeksforGeeks. Whether programming             excites you or you feel stifled,             wondering how to prepare for interview             questions or how to ace data structures             and algorithms, GeeksforGeeks is a             one-stop solution. With every tick of             time, we are adding arrows in our quiver.            From articles on various computer             science subjects to programming problems             for practice, from basic to premium courses,            from technologies to entrance examinations,             we have been building ample content with             superior quality.        </p>    </div></body>  </html>
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
HTML5
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)