-1

How to hide scrollbar in mozila firefox without stop scrolling in div.

I have used below css but i don't want to add "overflow-x:hidden" in div which i have added scrollbar. Also i can't used jQuery related plugin for Scrollbar because I have added 3 level nested menu so it's conflict with open second level menu.

margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;

Also i have used below css but it's not working in firefox.

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

If you have any suggestion related in CSS/jQuery for this issue then please let me know.

Anil Prajapati
  • 1
  • 3
  • Possible duplicate of [How to hide scrollbar in Firefox?](https://stackoverflow.com/questions/20997183/how-to-hide-scrollbar-in-firefox) – Arkellys Aug 22 '18 at 06:20
  • Possible duplicate of [How to hide scrollbar from body using jquery](https://stackoverflow.com/questions/32565304/how-to-hide-scrollbar-from-body-using-jquery) – kgbph Aug 22 '18 at 06:20

1 Answers1

2

You must wrap your scrollable div in another div with overflow:hidden that hides the scrollbar.

   #wrap {
        width: 150px;
        overflow: hidden;
        outline: 1px solid yellow;
    }
    
    #scroll {
        width: 170px;
        height: 100px;
        overflow: auto;
        background: blue;
        color: white;
    }
<div id="wrap">
        <div id="scroll">
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>
            foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>foo<br>bar<br>baz<br>      
        </div>
    </div>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
Omolewa Stephen
  • 444
  • 3
  • 19