0

CSS to hide scrollbar from Mozilla Firefox as we can hide it from chrome like:- 

::-webkit-scrollbar
Alireza
  • 2,319
  • 2
  • 23
  • 35
Sarabjit Singh
  • 611
  • 7
  • 17
  • 1
    this Question it will helpful for you : https://stackoverflow.com/questions/20997183/how-to-hide-scrollbar-in-firefox – Prashant Jan 07 '19 at 06:23

2 Answers2

1

You can do the following

<div style='width: 100%;height:300px;'>
     <div style='height: 100%; overflow: auto; margin-right: -15px;'>
          //your overflowing content
     </div>
</div>

Here height in parent div depends on your usecase.

The margin-right property in the inner div is the scrollbar width that can be computed from javascript as follows.

var div = document.createElement('div');
div.setAttribute('style', "width: 100%;height: 100%;position: absolute;overflow: auto;visibility: hidden;");
document.body.appendChild(div);
div.innerHTML = '<div style="width: 100%;height: 200%;"></div></div>';
var scrollWidth = div.offsetWidth - div.clientWidth;
div.parentNode.removeChild(div);
return scrollWidth;

You have to set the returned 'scrollWidth' data as negative 'margin-right' to the child container.

This will work on all browsers.

NOTE: The margin-right property should be set after checking whether the content is overflowing. Or else you will have some width problems.

John Peter
  • 441
  • 2
  • 13
0

There are many ways:

 body {
          srollbar-width: none
       }

::-webkit-scrollbar {

        background: transparent;
    }
Ahil Rahesh
  • 83
  • 4
ellipsis
  • 12,049
  • 2
  • 17
  • 33