在Angular中实现中间位置的自定义滚动条

1. 安装ngx-scrollbar插件

npm install ngx-scrollbar --save

2. 在app.module.ts中引入NgxScrollbarModule

import { NgxScrollbarModule } from 'ngx-scrollbar';

@NgModule({
  imports: [
    NgxScrollbarModule
  ]
})

3. 在HTML模板中添加ngx-scrollbar，并设置属性，实现自定义滚动条

4. 样式设置

在样式文件中设置.outer类的样式为：

.outer {
  height: 300px; /* 高度自定义 */
  overflow-y: hidden;
  display: flex;
  justify-content: center;
}

::ng-deep .scrollable-content {
  /* inner content styles */
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  margin-right: -16px; /* 确保始终有滚动条 */
  padding-right: 16px;
}

5. 完整示例

HTML模板：

样式文件：

.outer {
  height: 300px;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
}

::ng-deep .scrollable-content {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  margin-right: -16px;
  padding-right: 16px;
}