How to Add Scroll Bar in HTML?
Last Updated :
10 Sep, 2024
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.
OutputUsing 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.
- 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.
Similar Reads
How to Add Horizontal Scroll Bar in HTML Table?
When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpa
3 min read
How to add horizontal line in HTML ?
Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, we’ll explore two effective methods to add horizo
2 min read
How to move a text in HTML ?
Moving text in HTML refers to changing its position within the document's layout structure. This can be achieved by adjusting HTML elements' attributes such as style or class and <marquee> tag to modify their positioning, or by dynamically manipulating the HTML structure using JavaScript.Synta
1 min read
How to add scroll into react-bootstrap Modal Body?
React Bootstrap provides a straightforward way to create modal dialogue the for your web applications. However, sometimes the content within the modal body can be too long to fit within modal's default height. In such cases, you might add a scrollbar to the modal body to ensure users can scroll thro
2 min read
HTML DOM scrollTop Property
The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element's content doesn't generate a scroll bar, then its scrollTop value is 0. Syntax: It returns the scrollTop property.element.scrollTopIt is used to set the scrollTop propertyelemen
2 min read
How to hide scroll bar for inactivity?
There are many ways to hide the scroll bar when the page is inactive. One such way is using the onscroll, onmousewheel, onclick, and onmousemove events, which help us to achieve our goal using basic HTML and JavaScript. Approach:The onscroll event is used to disable the scroll bar.The onscroll event
3 min read
How to create Scrollable HTML Comment box ?
The purpose of this article is to create a scrollable comment box using HTML and CSS3 property. An HTML scrollbox is a box with expanding scroll bars when the contents of the box are too huge to fit.Approach: For the scope of this article, we will make a div element that displays the comments, and w
2 min read
HTML DOM Window Scroll() Method
The Window scroll() method scrolls the window to a particular place in the document. This method is different form scrollTo() method as it takes different parameters like scrolling behavior, etc using ScrolltoOptions Dictionary. Syntax: window.scroll(x-coord, y-coord) Or window.scroll(options) Param
2 min read
CSS | Scroll Padding top
The Scroll Padding top is an inbuilt property in Scroll Snap module. This property set the scroll padding top longhand. This property acts as a magnet on the top of the sliding element that stick to the top of the view-port and stop the scrolling(forcefully) in that place. The Scroll Padding propert
2 min read
How to Move Image in HTML?
The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement.Syntax<marquee> <im
2 min read