Javascript/Ionic3 Overflow: ẩn vô hiệu hóa cuộn trong Firefox

Question

Tôi có vấn đề mà tôi không thể loại bỏ Scrollbars của Firefox Quantum. Oh Chrome nó hoạt động như một nét duyên dáng whith css này:

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; 
} 

Ngoài ra tôi đã cố gắng để loại bỏ nó với jQuery và với việc thêm nó trực tiếp đến thẻ nội dung như thế này style="overflow: hidden;"

Không có gì đó hoạt động. Có vẻ như tôi không thể loại bỏ chúng. Tôi làm cách nào để xóa chúng?

EDIT:

với việc thêm overflow: hidden; để .scroll-content{} nó loại bỏ các thanh cuộn nhưng tôi không thể di chuyển được nữa trên firefox. Làm thế nào tôi có thể cho phép di chuyển với tràn: ẩn;

Answer 1

Bạn có thể làm điều gì đó như thế này.

<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> 

Tôi muốn tạo fiddle nhưng https://jsfiddle.net/ hiện không hoạt động.