How to Disable Scroll Bar in CSS
-
Set
overflowtohiddenfor thehtmlandbodyTags to Disable Scroll Bar in CSS -
Set
overflow-xtohiddento Disable Horizontal Scroll Bar in CSS
This tutorial will introduce some methods to disable the functionality of the scroll bar on a web page.
Set overflow to hidden for the html and body Tags to Disable Scroll Bar in CSS
We can use the CSS overflow property to disable the scroll bar in CSS. The overflow property defines the behavior of the scrollbar in a webpage. The scrollbar can be hidden or made visible when the content of an element is larger than the specified area. When we use the hidden value for the overflow property, the content is clipped to the area of the element, and the rest of the element will turn invisible. We can set it to scroll to add a scrollbar to view the rest of the unclipped content. We will use PHP to generate a long text on our webpage. Then we will disable the scroll bar.
For example, create a variable $text in PHP and give the value Hello World to it. Use the for loop to iterate it 100 times. Do not forget to add the br tag while displaying the variable. This creates 100 lines of the text Hello World. Include the PHP inside the body of the HTML. In CSS, select the html and body tags. Set the margin to 0 and give the height of 100%. Then, set the overflow property to hidden.
In the example below, we have set the height of the html and body to 100%. It means the body and height will have 100% height of their parent containers. The height of these containers will equal the browser’s height. The text will be clipped to the height of the browser, and the rest will be invisible. We can even set the margin property to 0 if the margin has been overridden with some other value to disable the scroll bar. We can even use overflow-y instead of overflow and set it to hidden. It will disable the scroll bar vertically.
Example Code:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
Set overflow-x to hidden to Disable Horizontal Scroll Bar in CSS
We can use the overflow-x property and set it to hidden to disable the horizontal scroll bar in CSS. We can test the disabling of the scroll bar horizontally by limiting a text to only one line. We can loop a text multiple times in PHP and use CSS to force it to appear in one line.
For example, loop the text Helloo World using PHP as in the method above. Do not use br tag so that the text does not appear in the next line. In CSS, set the display property to inline-block for the body tag. Set the white-space property to nowrap in the html tag. Then, set overflow-x to hidden selecting the body tag.
When we set display to inline-block, it forces the text to be shown in a single line. To achieve the text in a single line, we need to set the parent container’s white-space property to nowrap. Until now, the horizontal scroll bar has worked finely. Setting the overflow-x to hidden will clip the text according to the viewport, and the horizontal scroll bar will be disabled.
Example Code:
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
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