divクロスブラウザーでスクロールバーを表示せずにオーバーフローテキストを壊すことなく

Question

セットアップ： 私はビルド中です。私はスクロール可能にしたいdiv内にいくつかのスーパーサイズのテキストを持っています。テキストは画面の右端からはみ出し、水平方向にスクロールできるだけです（最初に正しく見えるようにすれば横スクロールします）。

私はスクロールバーを非表示にする必要があります（現在、私は0または1または2を取得します）。 Chromeで作業していますが、Firefox、Safari、IEではスクロールバーが表示されます。

私はand this one which looks promising、this previous questionを発見し、このcodepen example私はそれがしたい正確に何をしているが、私は自分のコードにそれを適用しようとしたとき、それはトリックがあふれを非表示にすることであるかのように見える（溢れテキストを隠しましたコンテナ付きのスクロールバーですが、私のテキストを目に見えて右にあふれさせている間は、どうやってそれを行うかは分かりません）。

.outer_container { 
     padding-top: 3rem; 
     padding-left: 15px; 
     margin-bottom: 5rem; 
    } 

    .middle_container{ 
     overflow-x:scroll; 
     white-space:nowrap; 
     width: 100%; 
     padding-top: 1rem; 
    } 

    #inner_container { 
     display:inline-block; 
     padding-bottom: 2rem; 
     overflow-x: scroll; 
    } 

    h1 { 
     font-size: 12rem; 
     line-height: 10rem; 
     margin-bottom: 1rem; 
    } 

    /* WORKS IN CHROME, SIMILAR THING FOR OTHER BROWSERS WITHOUT BREAKING TEXT OVERFLOW? */ 
    ::-webkit-scrollbar { 
     display: none; 
    } 

<div class="outer_container"> 

    <div class="middle_container"> 

     <div id="inner_container"> 

      <h1>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur.</h1> 

     </div> 

    </div> 

</div> 

：ここ

は私のサンプルコードは、コンテキストを取り出します

解決策はcodepenにあると確信しています。私はちょうどこれを初めて知り、自分のページに実装するときに何が間違っているのか分かりません。

Answer 1

これはあなたのために働く必要があります。

... 

.middle_container{ 
    white-space:nowrap; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
} 

#inner_container { 
    overflow-x: auto; 
    width: 100%; 
    height: 100%; 
    padding-bottom: 15px; 
} 

... 

Codepen：http://codepen.io/anon/pen/xgXXaX