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>

任何帮助都会受到赞赏，我确信解决方案是在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

在div交叉浏览器中隐藏滚动条而不会破坏溢出文本

1 个答案: