The scrollbar could make an in any other case elegant web site seem like it’s from the 90s, however due to new CSS properties, we will conceal the scrollbar with out impacting our customers’ capacity to scroll.
The scrollbar within the browser permits the person to scroll up and down on the web page with out having to take their fingers off the keyboard or trackpad, however to make the web page sleeker, some web sites select to cover the scrollbar altogether.
This information will present you how you can conceal the scrollbar in a number of standard browsers by making use of contemporary CSS methods. With out losing any extra time, let’s get proper right down to it.
This text will cowl:
N.B., this text assumes the reader has a fundamental understanding of HTML and CSS.
Whereas it’s frequent apply to not mess with default browser styling, on the subject of scrollbars, there are stable causes you must conceal them.
A scrollbar gives a visible cue for utilizing your mouse or keyboard to scroll up and down. Nevertheless, this visible cue isn’t wanted for a lot of layouts and design patterns, together with ones which are static, reminiscent of a slideshow or product gallery. Hiding the scrollbar will create a smoother scrolling expertise and take away some distractions out of your web site’s general structure.
Hiding a scrollbar additionally helps you save area for different content material in your web page — it could make for a extra constant person expertise throughout totally different gadgets as a result of totally different working methods might not render the scrollbar in the identical approach.
Nevertheless, the most typical purpose to cover a scrollbar is cellular viewing experiences. When viewing an app, like Fb, on their telephone, most customers count on scrolling to be vertical, without having for horizontal motion since screens are often tall and slim. Hiding the scrollbar creates a extra pure really feel whereas lowering consideration towards technical facets of looking.
Nowadays, scrollbars are pointless for many web sites; hiding them will give your web site a clear feel and look that’s way more refined than dated bars. Eradicating them out of your web site may assist with web page load pace and browser window actual property.
Now you could be questioning how precisely you eliminate these pesky bars after they don’t appear to wish to go away by themselves. We’ll go into element about that under.
Due to the elemental variations between browsers, there’s no common approach of hiding scrollbars with CSS. Every browser has its personal methodology, and we’ll have a look at all of them under.
In Chrome, Safari, Opera, and different WebKit-based browsers
To cover the scrollbar in WebKit-based browsers, it’s important to use the ::-webkit-scrollbar pseudo selector. ::-webkit-scrollbar is a pseudo-element in CSS utilized by builders to change the look of a browser’s scrollbar.
With the ::-webkit-scrollbar pseudo selector, there’s a variety of issues you are able to do to a scrollbar. You’ll be able to modify the arrows pointing up and down, change the monitor’s coloration, change the background, and extra. However we’re solely going to have a look at how you can conceal the scrollbar with out impacting scrolling. Let’s have a look at an instance.
First, I’m going so as to add the HTML of a random web site I’m constructing.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Suitable" content material="IE=edge">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>Fimber's template</title>
<hyperlink rel="stylesheet" href="https://weblog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css/fashion.css">
<hyperlink rel="preconnect" href="https://fonts.googleapis.com">
<hyperlink rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<hyperlink href="https://fonts.googleapis.com/css2?household=Poppins:[email protected]&household=Staatliches&household=Titan+One&show=swap" rel="stylesheet">
<script src="https://equipment.fontawesome.com/efbc88a111.js" crossorigin="nameless"></script>
</head>
<physique>
<part class="header">
<nav>
<a href="http://index.html"><img src="photographs/emblem.png" alt=""></a>
<div class="navlinks" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> <a href="http://">Residence</a></li><li>
<li> <a href="http://">About</a></li>
<li> <a href="http://">Contact</a></li>
<li> <a href="http://">Weblog</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 Finest Crypto Advertising Company</h1>
<p>We'll enable you to promote your crypto and NFT initiatives by PRs, advertorials, </br>and Telegram teams on the preferred crypto information and influencer channels!</p>
<a href="" class="herobtn">Contact us now</a>
</div>
</part>
<!--SERVICES START-->
<part class="providers">
<h2>Our Companies</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 superstar endorsement and shilling providers.</P>
</div>
<div class="services-col">
<i class="fa-solid fa-person-chalkboard fa-3x"></i>
<h3>MODERATION AND AMAs</h3>
<P>Get high quality moderators in your neighborhood, and get entry 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 superstar influencer endorsement, and Get your PR immediately printed on 100s of the largest crypto and finance new websites! </P>
</div>
</div>
</part>
</physique>
</html>
There’s fairly a little bit of content material there to make it scrollable. Right here’s what the above code seems to be like.
As you may see, within the CodePen under, the scrollbar is seen on the fitting. To make it invisible with out impacting scrolling, you simply have to focus on the physique component utilizing the ::-webkit-scrollbar pseudo selector and set the show to none.
physique::-webkit-scrollbar{
show: none;
}
As you may see under, the scrollbar is now not seen, however the web page remains to be scrollable for each the mouse and keyboard.
See the Pen
Making the scrollbar invisible by fimber elems (@Fimbosky1)
on CodePen.
The identical approach can be utilized to focus on parts with scrollable content material and make the scrollbar invisible. As an illustration, if you should make the scrollbar of a specific part invisible, you simply want to focus on the part with the identical code.
part::-webkit-scrollbar{
show: none;
}
Observe that this code solely applies to WebKit-based browsers.
There are different strategies to make the scrollbar disappear, so if you do not need to make use of the above methodology, you may simply goal the scrollbar straight and cut back its width to zero.
Extra nice articles from LogRocket:
part::-webkit-scrollbar {
width: 0 !necessary
}
You’ll get the identical outcome with out it impacting accessibility and keyboard scrolling.
In IE (Web Explorer) and Edge
The syntax for hiding a scrollbar in IE and Edge is a bit totally different from WebKit-based browsers like Opera, Chrome, and Safari. Right here, we’ve got to make use of the -ms-overflow-style property.
In keeping with CodeProject, “-ms-overflow-style is a proprietary CSS property, particular to Web Explorer and Microsoft Edge, which controls the conduct of scrollbars when a component’s content material overflows.”
In contrast to ::-webkit-scrollbar, you may’t use the -ms-overflow-style to customise the scrollbar. To make use of it to cover a scrollbar, you simply have to make use of the code under.
When you’re concentrating on a specific component or part, use the next code.
.component {
-ms-overflow-style: none;
}
When you’re concentrating on the whole web page, use this code.
physique {
-ms-overflow-style: none;
}
In Firefox
To efficiently conceal the scrollbar in Firefox, you simply want to make use of the scrollbar-width:none property to focus on a bit like this.
part {
scrollbar-width: none;
}
To focus on the scrollbar of the whole web page in Firefox, it’s important to be a bit extra cautious. Within the two sections above, we utilized the scrollbar code to the physique tag, and it labored, however with Firefox, we’ve got to focus on the html tag as an alternative.
html {
scrollbar-width: none;
}
Alternatively, you may select to make use of this different methodology to cover the scrollbar in Firefox.
.component {
overflow: -moz-scrollbars-none;
}
Conclusion
In case you are studying this, then by now, you totally perceive the artwork of hiding scrollbars with CSS with out impacting scrolling and accessibility. It’s necessary to notice that when concentrating on sections which have scrollable content material, leaving the scrollbar seen as a visible cue will assist your customers discover the part and never skip it by chance.
I hope this text has been of nice assist to you. See you within the subsequent one.
Is your frontend hogging your customers’ CPU?
As net frontends get more and more complicated, resource-greedy options demand an increasing number of from the browser. When you’re interested by monitoring and monitoring client-side CPU utilization, reminiscence utilization, and extra for your whole customers in manufacturing, attempt LogRocket.
https://logrocket.com/signup/
LogRocket is sort of a DVR for net and cellular apps, recording the whole lot that occurs in your net app or web site. As a substitute of guessing why issues occur, you may combination and report on key frontend efficiency metrics, replay person classes together with software state, log community requests, and mechanically floor all errors.
Modernize the way you debug net and cellular apps — Begin monitoring free of charge.
