使用 simplebar 库隐藏水平滚动条不起作用

Question

我在 Angular 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

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

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

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

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

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