PUBLISHED ON: AUGUST 23, 2021
How to always show scrollbars with CSS?
The Scrollbars are used to scroll through the contents of the webpage which are larger than the available display area. The scrollbar is used to provide horizontal and vertical scrolling.
The scrollbar is usually added only for large content which does not fit the display. But we can also show scrollbar in spite of content size.
In this tutorial, we will learn to always show scrollbars with CSS
Always show scrollbars
To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage.
To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.
Example: Always show scrollbar with CSS
In this example, we have used overflow: scroll to show scrollbar vertically as well as horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
body {
overflow: scroll;
}
</style>
</head>
<body>
<h2> Always show scrollbar </h2>
</body>
</html>
Output
Here is the output of the above example.
Example: Show only vertical scrollbar
In this example, we will only show vertical scroll using CSS overflow-y: scroll property.
Example: Show only horizontal scrollbar
In this example, we will only show horizontal scrollbar using CSS overflow-x: scroll property.
Conclusion
In this tutorial, we have learned to always force the scrollbar to show. It can be done using overflow property. We can choose the option to show both horizontal and vertical scrollbars or only one scrollbar. All three situations are shown with examples.
