html - 使用 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 库围绕您的内容创建包装器，因此应用于您的 div 的 CSS 溢出不会隐藏滚动条。

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

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

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

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