Question

我目前正面临禁用水平滚动条跨浏览器的问题。问题是，整个设置嵌入在显示器灵活环境中，我不知道内容的实际（固定）高度，因为它是动态的。

我目前的代码如下所示：

<div class="some-parent">
  <div class="wrapper-outer">
    <div class="wrapper-inner">
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
      <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </div>
</div>

使用相应的CSS：

.some-parent{
    width: 100px;
    position: relative;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}

.wrapper-outer{
  width: 100%;
  overflow: hidden;
}

.wrapper-inner{
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    flex-direction: row;
}

.wrapper-inner:after{
  content: '';
  display: block;
  height: 20px;
  height: 100%;
}

.content{
  border: 1px solid black;
  padding: 10px;
}

正如我已经说过的，.content元素的实际高度是未知的。

有没有办法禁用水平滚动条跨浏览器？到目前为止，我目前的做法始终是将.wrapper-inner 20px的高度设置为高于.wrapper-outer的高度overflow: hidden，但在这种情况下，遗憾的是它不起作用。

以下是相应的JSFiddle

Edit1：内容仍应滚动。

Answer 1

在.wraper-inner类中启用了水平滚动，你只需要禁用它。

.wrapper-inner{
overflow-x: hidden;
}

链接到更新的Fiddle

内容高度未知时隐藏水平滚动条

1 个答案: