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

【问题标题】：Hiding horizontal scrolling bar doesn´t work using simplebar library使用 simplebar 库隐藏水平滚动条不起作用
【发布时间】：2019-11-02 09:51:53
【问题描述】：

我在 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 导致了这个问题。

【问题讨论】：

你好胡安，你能提供一个最小的可重现的例子吗？

标签： html css angular typescript angular6

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

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

【解决方案3】：

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

溢出-y：滚动；
溢出-x：隐藏；

【讨论】：

它不起作用，我一直在测试那部分，当 ng-for 的第一个 div 出现时，水平滚动不显示，但是当第二个元素出现时，它替换第一个元素，所以新的 div 容器被渲染并出现水平滚动