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

Question

我正在一个 Angular 6 项目中使用 simplebar 库 (https://github.com/Grsmto/simplebar)。当我在 HTML 标签中添加 simple bar 后，它会显示水平和垂直滚动条，因此我想仅显示垂直滚动条。

我尝试使用以下 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导致这个问题。

- Juan

---

你好Juan，你能提供一个最小可重现的示例吗？ - Douglas P.

Answer 1

SimpleBar库创建了包装器，因此应用于您的

上的CSS溢出不会隐藏滚动条。

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

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

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

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

- Ismail Vittal

---

非常感谢，这个解决方案有效了。由于某种原因，在HTML标签中的“overflow-x: hidden”没有起作用。 - Juan

Answer 2

如果你正在使用来自 simplebar-react 的 SimpleBar，你可以在样式中设置 overflow，如下面的示例所示。

<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
   ...
</SimpleBar>

- D0rm1nd0

Answer 3

尝试同时使用这两个命令。

• overflow-y: scroll;
• overflow-x: hidden;

- Michael

---

它不起作用，我一直在测试那部分代码，当ng-for的第一个div出现时，水平滚动条没有显示，但是当第二个元素出现时，它会替换第一个元素，因此新的div容器被渲染，水平滚动条就会出现。 - Juan

Answer 4

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

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

- mkbctrl