'-webkit-scrollbar is not working on Firefox

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.

google-chromefirefoxscrollscrollbar


Solution 1:[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>

Solution 2:[2]

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

body {
    scrollbar-width: none; /* For Firefox */
}

Solution 3:[3]

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

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martijn Pieters
Solution 2 Abdelrhman Said
Solution 3 alroy
Solution 4

Related Questions