Appearance
How to Make Scrollbar Visible Only when Necessary
As we know, scrollbars are commonly visible even when content doesn't overflow. But what if you need to make them visible only when necessary?
On this page, you can find some examples of making the scrollbar on the <div> element visible only when necessary by using the CSS overflow, overflow-y, and overflow-x properties.
Create HTML
- Use a
<div>tag and place the content inside.
How to Make the Scrollbar Visible Only when Necessary
html
<div>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</div>Add CSS
- Set the overflow property to “auto”. This value adds a scrollbar when the content overflows.
- Set the width and height of the
<div>.
How to Make the Scrollbar Visible Only when Necessary
css
div {
overflow: auto;
width: 150px;
height: 150px;
}Let’s see the result of our code.
Example of adding a scrollbar on the <div> using the overflow property:
Example of adding a scrollbar on the div using the overflow property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow: auto;
width: 150px;
height: 150px;
border: 1px solid grey;
}
</style>
</head>
<body>
<div>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</div>
</body>
</html>Result
<div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </div>We can also add the scrollbar on the <div> element only vertically or horizontally. For that, we need to use the overflow-y or overflow-x property and set it to “auto” as in the previous example.
Example of adding a scrollbar on the <div> using the overflow-y property:
Example of adding a scrollbar on the div using the overflow-y property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-y: auto;
width: 300px;
height: 100px;
border: 1px solid #2b00ff;
}
</style>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>To scroll only horizontally, we need to use the overflow-x property as we mentioned above and set the width and border properties. Also, we add a <p> element inside the <div> tag and then add style to it in the CSS section.
Example of adding a scrollbar on the <div> using the overflow-x property:
Example of adding a scrollbar on the div using the overflow-x property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
overflow-x: auto;
width: 300px;
border: 1px solid #2b00ff;
}
p {
width: 350px;
padding: 10px 30px;
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>Another Approach:
You can make the scrollbar visible only when necessary by using the ::-webkit-scrollbar pseudo-element in CSS. Here's an example:
How to Make Scrollbar Visible Only when Necessary in HTML and CSS?
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
overflow-y: auto; /* Enable vertical scrolling */
width: 250px;
scrollbar-width: none; /* Hide scrollbar by default (modern standard) */
}
/* Hide scrollbar by default for WebKit browsers */
::-webkit-scrollbar {
display: none;
}
/* Style scrollbar when visible */
::-webkit-scrollbar-thumb {
background-color: #000000;
}
/* Style scrollbar track when visible */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem
ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.
</p>
</body>
</html>In this example, we have set the overflow-y property to auto on the body element to enable vertical scrolling when necessary.
Next, we've used the scrollbar-width: none property to hide the scrollbar by default. This is the modern, standard approach supported by most browsers. For WebKit-based browsers (Chrome, Safari, Edge), we also set display: none on the ::-webkit-scrollbar pseudo-element as a fallback.
When the content exceeds the height of the container and scrolling is required, the scrollbar will automatically appear. We've used the ::-webkit-scrollbar-thumb pseudo-element to style the appearance of the scrollbar thumb (the part of the scrollbar that is dragged up and down). We've given it a black background color to make it visible when needed.
Finally, we've used the ::-webkit-scrollbar-track pseudo-element to style the scrollbar track (the area that the thumb moves along). We've given it the same light gray background color as the default scrollbar to make it visible when the thumb is dragged up and down.
Note that the ::-webkit-scrollbar pseudo-element is a non-standard feature and is only supported in webkit-based browsers. The scrollbar-width property is the modern standard and is widely supported across all major browsers.