Question

我在有角6项目中使用了simplebar库（https://github.com/Grsmto/simplebar），当我在html标签中添加简单栏时，它显示了水平和垂直滚动条，所以我想显示仅限垂直滚动条。

我尝试使用此CSS属性隐藏水平滚动条：

overflow-x: hidden

并具有以下属性：

width:100%" and "position:abolute" or "position:relative"

<div data-simplebar style="overflow-x: hidden">
    <div *ngFor="let example of examples;">
        <div>{{example.title}}</div>
            <p>{{example.text}}</p>
        </div>
    </div>

我希望只显示水平滚动条，但它似乎不起作用，我不知道是否缺少某些内容或某些CSS属性，或者Angular是否导致了此问题。

Answer 1

尝试一次使用这两个命令。

overflow-y：滚动；
overflow-x：隐藏；

Answer 2

SimpleBar库在您的内容周围创建包装器，因此应用于div的CSS溢出将不会隐藏滚动条。

隐藏由插件创建的水平滚动条

.simplebar-track.simplebar-horizontal {
   display: none;
}

并禁用由库创建的可滚动div上的滚动。

.simplebar-content {
  overflow-x: hidden;
}

Answer 3

旧问题，但我认为仍然没有好的答案。当我需要隐藏水平滚动条时，我会这样做：

.simplebar-scrollbar::before {
  background-color: transparent;
}

使用simplebar库无法隐藏水平滚动条

3 个答案: