5

Need help!

body::-webkit-scrollbar{ width: 0; }

Its working only on Google Chrome but does not work on Firfox. how can I solve this please help me.

Yash Chitroda
  • 645
  • 4
  • 8
  • 27
  • Does this answer your question? [Increase Scroll-bar width in Firefox - html / css](https://stackoverflow.com/questions/22243949/increase-scroll-bar-width-in-firefox-html-css) – StudioTime Sep 15 '21 at 06:50

4 Answers4

4

Just use scrollbar-width property as a fallback for Firefox browser.

body {
    scrollbar-width: none; /* For Firefox */
}
1
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>body {
        scrollbar-width: none; /* For Firefox */
        overflow-y: scroll; 
    }
    
    body::-webkit-scrollbar {
        display: none;
    }</style>
<body>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>
<p>keep scrolling</p>

</body>
</html>
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Yash Jani
  • 154
  • 1
  • 13
1

This worked for me

:root{
  scrollbar-face-color: rgb(210,210,210); /* Firefox 63 compatibility */
  scrollbar-track-color: rgb(46,54,69); /* Firefox 63 compatibility */
  scrollbar-color: rgb(210,210,210) rgb(46,54,69);
  scrollbar-width: thin;
}

github

alroy
  • 11
  • 1
  • 2
-1

The prefix -webkit- implies that the CSS Rule is for Browsers based on Webkit, e.g. safari. There are a lot of CSS Rules that are for Firefox too, but these prefixes start with -moz-.

but in this case you don't need a prefix. A simple scrollbar-width: thin; should work (FF only): check MDN Web Docs for more details

Chrissy
  • 19
  • 1
  • 4