Skip to content
Related Articles

Related Articles

How to create a responsive scrollbox in CSS ?
  • Difficulty Level : Expert
  • Last Updated : 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :