How to Hide Scroll Bar in CSS
-
Set
displaytononefor the::-webkit-scrollbarPseudo-Element to Hide the Scroll Bar in CSS -
Set
scrollbar-widthtononeto Hide the Scroll Bar in CSS
This tutorial will introduce some methods to hide the scroll bar in a web page while still scrolling the web page.
Set display to none for the ::-webkit-scrollbar Pseudo-Element to Hide the Scroll Bar in CSS
We can use the ::-webkit-scrollbar pseudo-element selector to style the element’s scrollbar in CSS. However, this selector is only available in Webkit-based browsers, including Chrome, Opera, Safari, Edge, etc. We can use the ::-webkit-scrollbar pseudo-element to select the entire scrollbar of the web page and set the display property to none. It will allow us to scroll through the long webpage, but it will hide the scrollbar.
For example, create a PHP file and write the basic HTML structure in the file. Inside the body section, open the PHP tag <?php and write a text Hello World in the $text variable. Loop the variable 100 times and display the text. In CSS, use the ::-webkit-scrollbar pseudo-element to select the scrollbar. Then, set the display property to none.
In the example above, we used PHP to loop the text 100 times so that the webpage becomes long to scroll through the webpage. The PHP code causes the text Hello World to be printed 100 times in a new line. Setting the display property to none hides the scrollbar, still enabling us to scroll the page. Thus, we can achieve the hidden scrollbar feature.
Example Code:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
::-webkit-scrollbar {
display: none;
}
Set scrollbar-width to none to Hide the Scroll Bar in CSS
We can use the scrollbar-width property and set it to none to hide the scrollbar in CSS. It will hide the scrollbar from the webpage. The other option, auto, sets the default scrollbar, and the option thin will make the scrollbar look thinner according to the browser. However, the property only works for the Firefox browser. We will use the overflow-y property to keep the scrolling functionality clipping the content. It works when a block-level element overflows at the top and the button edges. We can use the same PHP script as the first method to demonstrate the disabling of the scrollbar.
For example, create a div with the class container. Inside the div, loop the text as in the first method. In CSS, give a background color along with some width and height to the container. Set the scrollbar-width property to none and set the overflow-y property to scroll.
In the example below, setting the scrollbar-width to none will hide the scrollbar, and the overflow-y set to scroll will keep alive the scrolling functionality. In this way, we can scroll through a long page hiding the scrollbar.
Example Code:
<body>
<div class="container">
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
}
?>
</div>
</body>
.container {
scrollbar-width: none;
background-color: #bbb;
width: 500px;
height: 600px;
overflow-y: scroll;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn