How to Hide the Scrollbar on an HTML Page
Topic: HTML / CSSPrev|Next
Answer: Use the CSS overflow
Property
You can simply apply the CSS overflow
property with the value hidden
on the <body>
element to hide scroll bar on an HTML page. However, content will be clipped if necessary to fit the padding box.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hiding Scrollbar on a Web Page</title>
<style>
body{
overflow: hidden;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus.</p>
</body>
</html>
Alternatively, you can hide the horizontal scrollbar by setting the overflow-x
property to hidden
and the vertical scrollbar by setting the overflow-y
property to hidden
.
Related FAQ
Here are some more FAQ related to this topic: