ADVERTISEMENT
ADVERTISEMENT

Hiding a scroll bar on an HTML page

Learn about the hiding a scroll bar on an HTML page.
Submitted by Apurva Mathur, on May 24, 2022

The overflow property of CSS helps us to hide the overfit content. As the name suggests overflow means to flow over the bounds so when we want to control the flow of content in HTML we use this property. It fits the content according to our needs like adding or hiding scroll bars, etc.

There are different values of overflow:

  • overflow: scroll;
  • overflow: auto;
  • overflow: hidden;
  • overflow: visible;
  • overflow: clip;

To hide scroll bars we can use overflow: hidden, this hidden value of the overflow property will hide the scroll bar.

Let's see this via example;

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
         height: 2000px;
         width: 2000px;
         overflow-y: hidden;
         overflow-x: hidden;
         color:peru;
         font-family: "Arial Unicode MS";
         font-weight: inherit;
         font-size: 20px;
         }
      </style>
   </head>
   <body>
      <div>
         <h1>
            HIDING SCROLL BAR
         </h1>
         <p>
            Trust your heart. Believe in yourself. Follow your dream and you can do whatever you want to. Ubiquitous morals in Hollywood movies and many TV series.
            But potentially poisonous. As Andrew Rilstone has pointed out, "this is a deeply re-assuring message for the high-achievers who make movies.
            It says in affect 'We are rich and famous because we deserve it'. It is a very depressing message for the people who make their coffee."
         </p>
      </div>
   </body>
</html>

Output:

Example 1: Hiding a scroll bar

Output after removing overflow-y: hidden; overflow-x: hidden;

Example 2: Hiding a scroll bar

As we can see once you remove overflow:hidden property you'll get the scroll bars again. Since my screen size is too big that is why I've used the overflow-y:hidden; overflow-x:hidden; property to remove both horizontal and vertical scroll bars.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.