Friday, November 24, 2017

Javascript/Ionic3 Overflow:hidden disable scroll in Firefox

Leave a Comment

I have the problem that I cant remove the Scrollbars of Firefox Quantum. Oh Chrome it works like a charm whith this css:

 div::-webkit-scrollbar {   border:none;   width:0;   background: rgba(0,0,0,0);   display: none;   overflow-x: hidden;   overflow-y: hidden; }  div::-webkit-scrollbar-track {   border:none;   width:0;   background: rgba(0,0,0,0);   display: none;   overflow-x: hidden;   overflow-y: hidden; }  div::-webkit-scrollbar-thumb {   border:none;   width:0;   background: rgba(0,0,0,0);   display: none;   overflow-x: hidden;   overflow-y: hidden; } 

Also I tried to remove it with jQuery and with adding it directly to the body tag like this style="overflow: hidden;"

Nothing of that works. It seems I cant get rid of them. How can I remove them?

EDIT:

with adding overflow: hidden; to .scroll-content{} it removed the scrollbars but I cant scroll anymore on firefox. How can I enable scrolling with overflow: hidden;

1 Answers

Answers 1

You can do something like this.

<style>     #container{         height: 500px;         width: 200px;         background-color: #ccc;         overflow: hidden;     }     #container-inner{         width: calc(100% + 17px);         height: 100%;         overflow: scroll;         overflow-x: hidden;     }     .content{         width: 100%;         height: 300px;     }     .one{         background-color: red;     }     .two{         background-color: green;     }     .three{         background-color: yellow;     } </style> <div>     <div id="container">         <div id="container-inner">             <div class="content one">             </div>             <div class="content two">             </div>             <div class="content three">             </div>         </div>     </div> </div> 

I'd create a fiddle but https://jsfiddle.net/ is down right now.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment