Open In App

How to create a responsive scrollbox in CSS ?

Last Updated : 22 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads