WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties