Fimber Elemuwa I'm a freelance web developer and certified SEO Content writer. I dabble a bit in poetry and I LOVE CHESS.

Using CSS to hide scrollbars without impacting scrolling

5 min read 1561

Using CSS To Hide Scrollbars Without Impacting Scrolling

The scrollbar can make an otherwise elegant website look like it’s from the 90s, but thanks to new CSS properties, we can hide the scrollbar without impacting our users’ ability to scroll.

The scrollbar in the browser allows the user to scroll up and down on the page without having to take their hands off the keyboard or trackpad, but to make the page sleeker, some websites choose to hide the scrollbar altogether.

This guide will show you how to hide the scrollbar in several popular browsers by making use of modern CSS techniques. Without wasting any more time, let’s get right down to it.

This article will cover:

N.B., this article assumes the reader has a basic understanding of HTML and CSS.

Reasons to hide the scrollbar

While it’s common practice not to mess with default browser styling, when it comes to scrollbars, there are solid reasons you should hide them.

A scrollbar provides a visual cue for using your mouse or keyboard to scroll up and down. However, this visual cue isn’t needed for many layouts and design patterns, including ones that are static, such as a slideshow or product gallery. Hiding the scrollbar will create a smoother scrolling experience and remove some distractions from your site’s overall layout.

Hiding a scrollbar also helps you save space for other content on your page — it can make for a more consistent user experience across different devices because different operating systems may not render the scrollbar in the same way.

However, the most common reason to hide a scrollbar is mobile viewing experiences. When viewing an app, like Facebook, on their phone, most users expect scrolling to be vertical, with no need for horizontal movement since screens are usually tall and narrow. Hiding the scrollbar creates a more natural feel while reducing attention toward technical aspects of browsing.

These days, scrollbars are unnecessary for most websites; hiding them will give your site a clean look and feel that’s far more sophisticated than dated bars. Removing them from your site can also help with page load speed and browser window real estate.

Now you may be wondering how exactly you get rid of those pesky bars when they don’t seem to want to go away by themselves. We’ll go into detail about that below.



Hiding the scrollbar

Because of the fundamental differences between browsers, there’s no universal way of hiding scrollbars with CSS. Each browser has its own method, and we will look at all of them below.

In Chrome, Safari, Opera, and other WebKit-based browsers

To hide the scrollbar in WebKit-based browsers, you have to use the ::-webkit-scrollbar pseudo selector. ::-webkit-scrollbar is a pseudo-element in CSS used by developers to modify the look of a browser’s scrollbar.

With the ::-webkit-scrollbar pseudo selector, there’s a wide range of things you can do to a scrollbar. You can modify the arrows pointing up and down, change the track’s color, change the background, and more. But we’re only going to look at how to hide the scrollbar without impacting scrolling. Let’s look at an example.

First, I’m going to add the HTML of a random website I’m building.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fimber's template</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected]&family=Staatliches&family=Titan+One&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/efbc88a111.js" crossorigin="anonymous"></script>
</head>
<body>
   <section class="header">
        <nav>
            <a href="http://index.html"><img src="images/logo.png" alt=""></a>
            <div class="navlinks" id="navLinks">
                <i class="fa fa-times" onclick="hideMenu()"></i>
                    <ul>
                        <li> <a href="http://">Home</a></li><li>
                        <li> <a href="http://">About</a></li>
                        <li> <a href="http://">Contact</a></li>
                        <li> <a href="http://">Blog</a></li>
                        <li> <a href="http://">Pricing</a></li>
                    </ul>  
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>

        <div class="textbox">
            <h1>The Best Crypto Marketing Agency</h1>
            <p>We'll help you promote your crypto and NFT projects through PRs, advertorials, </br>and Telegram groups on the most popular crypto news and influencer channels!</p>
            <a href="" class="herobtn">Contact us now</a>
        </div>

   </section>

   <!--SERVICES START-->
    <section class="services">
        <h2>Our Services</h2>

        <div class="row">
            <div class="services-col">
                <i class="fa-solid fa-bullseye fa-3x"></i>
                <h3>NFT PROMOTIONS AND SHILLING</h3>
                <P>Promote your NFT with our celebrity endorsement and shilling services.</P>
            </div>

            <div class="services-col">
                <i class="fa-solid fa-person-chalkboard fa-3x"></i>
                <h3>MODERATION AND AMAs</h3>
                <P>Get quality moderators for your community, and get access to premium AMA channels</P>
            </div>

            <div class="services-col">
                <i class="fa-solid fa-business-time fa-3x"></i>
                <h3>INFLUENCER MARKETING AND PRESS RELEASES</h3>
                <P>Get celebrity influencer endorsement, and Get your PR instantly published on 100s of the biggest crypto and finance new sites! </P>
            </div>
        </div>
    </section>

</body>
</html>

There’s quite a bit of content there to make it scrollable. Here’s what the above code looks like.

Visible Scrollbar

As you can see, in the CodePen below, the scrollbar is visible on the right. To make it invisible without impacting scrolling, you just have to target the body element using the ::-webkit-scrollbar pseudo selector and set the display to none.

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

As you can see below, the scrollbar is no longer visible, but the page is still scrollable for both the mouse and keyboard.

See the Pen
Making the scrollbar invisible
by fimber elems (@Fimbosky1)
on CodePen.

The same technique can be used to target elements with scrollable content and make the scrollbar invisible. For instance, if you need to make the scrollbar of a particular section invisible, you just need to target the section with the same code.

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

Note that this code only applies to WebKit-based browsers.

There are other methods to make the scrollbar disappear, so if you do not want to use the above method, you can just target the scrollbar directly and reduce its width to zero.


More great articles from LogRocket:


  section::-webkit-scrollbar {
    width: 0 !important
    }

You’ll get the same result without it impacting accessibility and keyboard scrolling.

In IE (Internet Explorer) and Edge

The syntax for hiding a scrollbar in IE and Edge is a bit different from WebKit-based browsers like Opera, Chrome, and Safari. Here, we have to use the -ms-overflow-style property.

According to CodeProject, “-ms-overflow-style is a proprietary CSS property, specific to Internet Explorer and Microsoft Edge, which controls the behavior of scrollbars when an element’s content overflows.”

Unlike ::-webkit-scrollbar, you can’t use the -ms-overflow-style to customize the scrollbar. To use it to hide a scrollbar, you just have to use the code below.

If you’re targeting a particular element or section, use the following code.

.element {
    -ms-overflow-style: none;
  }

If you’re targeting the entire page, use this code.

body {
    -ms-overflow-style: none;
  }

In Firefox

To successfully hide the scrollbar in Firefox, you just need to use the scrollbar-width:none property to target a section like this.

section {
    scrollbar-width: none;
  }

To target the scrollbar of the entire page in Firefox, you have to be a bit more careful. In the two sections above, we applied the scrollbar code to the body tag, and it worked, but with Firefox, we have to target the html tag instead.

html {
    scrollbar-width: none;
  }

Alternatively, you can choose to use this other method to hide the scrollbar in Firefox.

.element {
    overflow: -moz-scrollbars-none;
    }

Conclusion

If you are reading this, then by now, you fully understand the art of hiding scrollbars with CSS without impacting scrolling and accessibility. It’s important to note that when targeting sections that have scrollable content, leaving the scrollbar visible as a visual cue will help your users notice the section and not skip it by accident.

I hope this article has been of great help to you. See you in the next one.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — .

Fimber Elemuwa I'm a freelance web developer and certified SEO Content writer. I dabble a bit in poetry and I LOVE CHESS.

Leave a Reply