How to create a responsive scrollbox in CSS ?

Last Updated : 26 Jul, 2024

The purpose of this article is to create a responsive scrollbar in HTML page structure using CSS.

In CSS, a responsive scroll box is an interaction technique that contains text, images, or any other elements. They can be scrolled in preset directions, which allows users to scroll if the contents of the box are larger. 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 content to fit into a 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 the box to scroll down. Add overflow: auto to create a scrolling effect.

Now, that 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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Scrollbox - GeeksforGeeks</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            color: #0f9d58;
            text-align: center;
        }

        .scrollbox {
            background-color: #fff;
            border: 2px solid #0f9d58;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            width: 100%;
            height: 200px;
            overflow-y: auto;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Scrollbar Styles */
        .scrollbox::-webkit-scrollbar {
            width: 12px;
        }

        .scrollbox::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 8px;
        }

        .scrollbox::-webkit-scrollbar-thumb {
            background: #0f9d58;
            border-radius: 8px;
        }

        .scrollbox::-webkit-scrollbar-thumb:hover {
            background: #0b8043;
        }

        /* For Firefox */
        .scrollbox {
            scrollbar-width: thin;
            scrollbar-color: #0f9d58 #f1f1f1;
        }

        @media screen and (max-width: 600px) {
            .scrollbox {
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <div class="scrollbox">
            <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>
            <p>
                GeeksforGeeks provides a platform for all technology enthusiasts to learn, share, and grow. With a wide range of tutorials, articles, and practice problems, it caters to both beginners and experienced programmers. The website covers various programming languages, data structures, algorithms, and computer science concepts, making it an invaluable resource for students, professionals, and anyone passionate about coding.
            </p>
            <p>
                In addition to its vast collection of technical content, GeeksforGeeks also offers coding competitions, job opportunities, and a vibrant community where users can interact, ask questions, and share their knowledge. This comprehensive approach to learning and skill development has made GeeksforGeeks a go-to platform for millions of technology enthusiasts worldwide.
            </p>
        </div>
    </div>
</body>
</html>

Output:

How to make Refresh icon using jQuery Mobile ?

arelemegha

Improve

Article Tags :

How to create a responsive scrollbox in CSS ?

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?