ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

How to hide scroll bar while scrolling using CSS?

CSS | Hiding scrollbars: Here, we are going to learn How to hide scroll bar while scrolling using CSS?
Submitted by Anjali Singh, on February 01, 2020

Introduction:

It is always nice to have a responsive website or web page, to create such websites or web pages we have to make use of our developing skills to a great extent to bring about the functionality as well as the appearance of the web page or website. CSS helps in making such tasks easy, as CSS is used for styling and various style attributes are used profoundly to create a very responsive yet attractive website or web page. Anyone can create websites or web pages with ample knowledge but all the creative and unique websites or web pages demand something beyond the fundamental knowledge skills.

As we know, we can use CSS for styling our web page or website therefore the topic of this section is also related to CSS. So let us keep moving and see how can we hide scroll bars while using CSS, which would be very cool, right? So how do we do that? Is there a method? Is there a particular property to do it? Well, if you are wondering if there is a certain property to achieve this then you are correct. Let us have a look at this property!

Property:

To hide the scroll bar you may use -WebKit- and display it to none. Well, why only WebKit? The answer to that is that WebKit property is supported by a large group of browsers, for example, chrome, safari, etc. Therefore it would be convenient to implement WebKit property if you are planning to hide the scroll bar. Although there are properties for different browsers which are listed below,

  • For Firefox you can use -Moz-.
  • For Internet Explorer, you can use -ms-.

Note:

It would be pretty cool if we can hide our scroll bar while scrolling but there are some very crucial points that you must consider before proceeding to implement this method.

  • You should prefer to hide the scroll bar only when you are sure that the content of your website or web page would still be visible to the user because the user might skip the content.
  • You should try to avoid horizontal scrolling on your web pages or websites and you must also try to avoid hiding horizontal scroll bars, as it becomes difficult to read the content.
  • Even if you still want to hide the scroll bar, then place all the important information about the web page or web site above the fold.

Syntax:

    element::-webkit-scrollbar{
        display:none;
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            background-color: #f40;
            color: #fff;
            width: 200px;
            height: 200px;
            border: 1px dotted black;
            overflow-y: scroll;
        }
        
        div::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <h2>Hide scrollbar while scrolling</h2>
    <p>Scroll the below div element</p>
    <div>
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp.
    </div>
</body>

</html>

Output

CSS | Hiding Scroll Bars | Example

In the above example, try to run the code and scroll the content inside the div element.

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.