Angular 6中使用Simplebar库无法隐藏横向滚动条问题

我明白你遇到的困扰——直接给带data-simplebar的div加overflow-x: hidden没效果，这是因为Simplebar会生成自己的嵌套DOM结构，你的样式没有作用到真正控制滚动的内部容器上。下面给你几个可行的解决方案：

方案1：通过CSS隐藏横向滚动轨道和内容横向溢出 #

Simplebar会生成.simplebar-content（内容容器）和.simplebar-horizontal（横向滚动轨道）这两个关键元素，我们可以针对它们写样式：

方法A：全局样式（推荐，避免Angular样式隔离问题） #

在项目的styles.css（或全局样式文件）中添加：

/* 禁止内容横向溢出 */
[data-simplebar] .simplebar-content {
  overflow-x: hidden !important;
}

/* 直接隐藏横向滚动条轨道 */
[data-simplebar] .simplebar-track.simplebar-horizontal {
  display: none;
}

方法B：组件内样式（需穿透Angular样式隔离） #

如果要在组件的styles里写，需要用::ng-deep来穿透封装：

::ng-deep [data-simplebar] .simplebar-content {
  overflow-x: hidden;
}

::ng-deep [data-simplebar] .simplebar-horizontal {
  display: none;
}

之后你的HTML可以保持简洁，不用行内样式：

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

方案2：通过初始化配置禁用横向滚动 #

如果是手动初始化Simplebar（而非仅依赖data-simplebar属性），可以在初始化时直接禁用横向滚动功能：

// 在组件的ngAfterViewInit钩子中初始化
ngAfterViewInit() {
  new Simplebar(document.querySelector('[data-simplebar]'), {
    horizontal: false, // 禁用横向滚动
    autoHide: true // 可选：自动隐藏纵向滚动条
  });
}

如果用的是Angular封装的Simplebar库（比如ngx-simplebar），可以直接通过输入属性配置：

<ngx-simplebar [horizontal]="false">
  <!-- 你的内容 -->
</ngx-simplebar>

为什么之前的方法无效？ #

带data-simplebar的div只是Simplebar的外层容器，实际的滚动逻辑由它动态生成的内部DOM节点控制。你之前加的overflow-x: hidden只作用于外层容器，无法影响内部的.simplebar-content元素的滚动行为，所以才会失效。

内容的提问来源于stack exchange，提问作者Juan