2017-11-16 20 views
9

Firefox Quantumのスクロールバーを削除できないという問題があります。ああ、それはこのCSS whith魔法のように動作Chromeは:Javascript/Ionic3 Overflow:Firefoxの隠しディセーブルスクロール

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

また、私はjQueryを使って、そののこのstyle="overflow: hidden;"

何も動作のようにbodyタグに直接追加することでそれを削除しようとしました。私はそれらを取り除くことができないようです。 どうすれば削除できますか?

EDIT:

.scroll-content{}overflow: hidden;を追加すると、それは、スクロールバーを削除しますが、私は、Firefoxにもうスクロール傾けます。オーバーフロー:非表示でスクロールを有効にするにはどうすればいいですか?

答えて

2

このようなことができます。

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

私はフィドルを作成しますが、https://jsfiddle.net/は現在ダウンしています。

+1

幅:calc(100%+ 17px);スクロールバーを隠すように働いた。残りはあなたに感謝する必要もさえなかった! –

+0

それはあなたのために働いてうれしい。 –