Скрыть полосы прокрутки в div-браузере без переполнения текста переполнения

Question

Настройка: На полпути вниз. Я строю. У меня есть текст сверхразмерного текста внутри div, который я хотел бы прокручивать. Текст должен бежать с правого края экрана и быть только горизонтально прокручиваемым (я буду подключаться к боковому прокручиванию впоследствии, если я могу сначала получить это правильно).

Мне нужно скрыть полосы прокрутки (в настоящее время я получаю 0 или 1 или 2!). Я работаю в Chrome, но в Firefox, Safari и IE полосы прокрутки все еще появляются.

Я нашел this previous question, and this one which looks promising, и это 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> 

Любая помощь будет оценена, я уверен, что решение находится в кодефене, я просто очень новичок в этом и изо всех сил пытаюсь понять, что я делаю неправильно, когда реализую его на своей собственной странице.

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