Open In App

How to Add Scroll Bar in HTML?

Last Updated : 10 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In HTML and CSS, scrollbars can allow users to navigate through the overflowed content within the specified area. They can appear when the content overflows the visible area of the element, such as the <div>, allowing users to scroll horizontally or vertically. we are going to add the scroll bar in our HTML document.

There are several ways to add the scrollbars to an HTML element:

Using the CSS overflow Property

The overflow property is one of the primary ways to control the behaviour of the content that exceeds the boundaries of the HTML element. This property can determine whether to clip the content, display scrollbars or show the content outside of the box.

  • overflow: auto: It can add the scrollbars only when necessary.
  • overflow: scroll: It can always show scrollbars, regardless of whether the content is overflowing.
  • overflow: hidden: It can hide any overflowing content.
  • overflow: visible: The content is not clipped and may overflow the outside of the element's box.

Syntax:

.element {
overflow: auto; /* Can be scroll, hidden, or visible */
}

Example: This example shows the Vertical and Horizontal scrollbars using the overflow: auto property.

HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        .scroll-box {
            width: 300px;
            height: 150px;
            overflow: auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="scroll-box">
        <h1 style="color: green;">GeeksforGeeks</h1>
        <p>This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
            This is some text that will overflow and create a scrollbar.
        </p>
    </div>
</body>

</html>

Output:

Example 2: This example always Show Scrollbars using the overflow: scroll property.

HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        .scroll-box {
            width: 300px;
            height: 150px;
            overflow: scroll;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="scroll-box">
        <h1 style="color: green;">GeeksforGeeks</h1>
        <p>This content is designed to have scrollbars, 
           even if the content fits.
        </p>
    </div>
</body>

</html>

Output: Scrollbars will be visible even if the content does not require the scrolling.

ss2
Output

Using the inline CSS styles in HTML

  • Sometimes, it can be practical to apply the styles to an HTML element using the style attribute.
  • This method can allows for the quick adjustments without needing the separate the CSS file, especially in the simple or prototype the web pages.
  • Using the inline CSS can be beneficial for testing the purposes or quick adjustments. However, for maintainability and scalability, it's generally recommended to use the separate CSS file.
  • Inline styles override any external or internal styles unless marked with !important.

Syntax:

<div style="overflow: auto;"></div>

Example: The scrollbar will appear when the content inside the <div> exceeds the height or width the limits, using the inline CSS to enforce scrolling.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Inline CSS Scrollbar Example</title>
</head>

<body>
    <div style="width: 300px; height: 150px; overflow: auto; border: 
                1px solid #ccc; padding: 10px;">
        <h1 style="color: green;">GeeksforGeeks</h1>
        <p>This content is inside a div with an inline style that
            causes scrolling when content overflows.
            This content is inside a div with an inline style
            that causes scrolling when content overflows.
            This content is inside a div with an inline style
            that causes scrolling when content overflows.
            This content is inside a div with an inline style
            that causes scrolling when content overflows.
            This content is inside a div with an inline style
            that causes scrolling when content overflows.
            This content is inside a div with an inline style
            that causes scrolling when content overflows.
        </p>
    </div>
</body>

</html>

Output:

Using the overflow-x and overflow-y Properties

These properties can allow for the more granular control over the scrollbars by the targeting either horizontal or vertical overflow specifically. They are useful when you want to allow the scrolling in only one direction.

  • overflow-x: It can manages the horizontal overflow. we can set it to the auto, scroll, hidden or visible.
  • overflow-y: It can manages the vertical overflow with the same options as overflow-x.

Syntax:

.element {
overflow-x: scroll; /* Can be auto, hidden, or visible */
overflow-y: hidden; /* Can be auto, scroll, or visible */
}

Example: This example shows Horizontal Scrolling Only.

HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        .horizontal-scroll {
            width: 300px;
            height: 150px;
            overflow-x: scroll;
            overflow-y: hidden;
            border: 1px solid #ccc;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="horizontal-scroll">
        <h1 style="color: green;">GeeksforGeeks</h1>
        <p>This is a long line of text that should create
            a horizontal scrollbar because overflow-x is set to scroll,
            while vertical scrolling is disabled.
        </p>
    </div>
</body>

</html>

Output: Only the horizontal scrollbar appears because overflow-x: scroll can allows for the horizontal scrolling and overflow-y: hidden can disables the vertical scrolling.

Using the JavaScript for Custom Scrollbars

  • For the more sophisticated UI designs, we may want the custom scrollbars that fit the websites aesthetic.
  • JavaScript can be used to create the custom scrollbars by manipulating the elements and their scrolling behaviour.
  • This approach can involves hiding the default scrollbar and replacing it with the custom elements (like the div representing the scrollbar track and another div for the thumb).
  • JavaScript can be used to handle the events like dragging the scrollbar thumb or scrolling within the content area.

Example: This example shows the use of JavaScript for custom scrollbars.

HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        .custom-scroll {
            width: 300px;
            height: 150px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ccc;
        }

        .content {
            width: 100%;
            height: 150px;
            /* Match container height */
            overflow-y: scroll;
            /* Enable vertical scrolling */
            overflow-x: hidden;
            /* Disable horizontal scrolling */
            padding-right: 10px;
            /* Space for scrollbar */
            box-sizing: content-box;
            /* Ensure padding does not affect width */
        }

        .scrollbar {
            width: 10px;
            height: 100%;
            background: #f0f0f0;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }

        .thumb {
            width: 10px;
            background: #888;
            height: 30px;
            /* Adjust thumb height as needed */
            position: absolute;
            top: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="custom-scroll">
        <div class="content" id="scrollable-content">
            <h1 style="color: green;">GeeksforGeeks</h1>
            <p>Content inside the scrollable area. It is
                longer than the container, which triggers
                the custom scrollbar. Content inside the scrollable
                area. It is longer than the container, which triggers
                the custom scrollbar. Content inside the scrollable area.
                It is longer than the container, which triggers the custom
                scrollbar. Content inside the scrollable area. It is longer
                than the container, which triggers the custom scrollbar.
                Content inside the scrollable area. It is longer than the container,
                which triggers the custom scrollbar.
            </p>
        </div>
        <div class="scrollbar">
            <div class="thumb" id="scrollbar-thumb"></div>
        </div>
    </div>
    <script>
        // JavaScript for handling custom scrollbar functionality
        const content = document.getElementById('scrollable-content');
        const scrollbar = document.getElementById('scrollbar-thumb');

        let isDragging = false;
        let startY;
        let startScrollTop;

        // Event listener for starting the drag
        scrollbar.addEventListener('mousedown', function (e) {
            isDragging = true;
            startY = e.clientY;
            startScrollTop = content.scrollTop;
            document.body.style.userSelect = 'none'; 
        });

        // Event listener for dragging
        document.addEventListener('mousemove', function (e) {
            if (isDragging) {
                const deltaY = e.clientY - startY;
                const contentScrollHeight = content.scrollHeight - content.clientHeight;
                const thumbScrollHeight = scrollbar.parentElement
                                         .clientHeight - scrollbar.clientHeight;

                // Calculate how much to scroll based on thumb movement
                const scrollAmount = (deltaY / thumbScrollHeight) * contentScrollHeight;
                content.scrollTop = startScrollTop + scrollAmount;

                // Move the scrollbar thumb accordingly
                const thumbTop = (content.scrollTop / contentScrollHeight) * thumbScrollHeight;
                scrollbar.style.top = `${thumbTop}px`;
            }
        });

        // Event listener to stop the drag
        document.addEventListener('mouseup', function () {
            isDragging = false;
            document.body.style.userSelect = 'auto';
        });

        // Sync thumb position with content scrolling
        content.addEventListener('scroll', function () {
            const contentScrollHeight = content.scrollHeight - content.clientHeight;
            const thumbScrollHeight = scrollbar.parentElement 
                                      .clientHeight - scrollbar.clientHeight;
            const thumbTop = (content.scrollTop / contentScrollHeight) * thumbScrollHeight;
            scrollbar.style.top = `${thumbTop}px`;
        });
    </script>
</body>

</html>

Output: This example can set up the basic HTML structure for the custom scrollbars. We would use the JavaScript to link the contents scrolling behaviour with the scrollbar.


Next Article
Article Tags :

Similar Reads