How to Hide the Scrollbar in CSS

One of the most common css tricks that web developers use is to hide the scrollbar in css. This can be done by adding a css class called “hide-scrollbars” to any element on your webpage, and it will disappear instantly! Want to see how? It’s easy. All you have to do is open up your css file and add this line: How to Hide the Scrollbar in CSS

<style> body { overflow-x: hidden; overflow-y: hidden;}</style>

This will cause the element with the css class “hide-scrollbars” (in this case, <body>) not only to lose its scrollbar but also its text flow over into another column if there is too much content for one column.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 5000px; /* Make this site really long */
  width: 5000px; /* Make this site really wide */
  overflow-y: hidden;
  overflow-x: hidden;
}
</style>
</head>
<body>

<h2>Hide scrollbars</h2>
<p>This example will hide the scrollbars (and the functionality - it is not possible to scroll inside the page).</p>
<p>Try to remove one or both of the <strong>overflow</strong> properties to see the effect.</p>

</body>
</html>

Related post

How to Bold Text in CSS

Vue js File Upload Axios Php Example

How to Bold Text in CSS

Leave a Comment