在Angular的textarea中使用Perfect Scrollbar插件的实现求助

没问题！我来帮你把Perfect Scrollbar集成到你的Angular textarea组件里，一步步来：

1. 安装依赖 #

首先确保你安装了适配Angular的Perfect Scrollbar包，打开终端运行：

npm install ngx-perfect-scrollbar perfect-scrollbar

2. 导入模块 #

在你的组件所属的模块（比如AppModule或者自定义业务模块）中导入NgxPerfectScrollbarModule：

import { NgxPerfectScrollbarModule } from 'ngx-perfect-scrollbar';

@NgModule({
  imports: [
    // ...其他已导入的模块
    NgxPerfectScrollbarModule
  ]
})
export class YourTargetModule { }

3. 修改模板代码 #

把你原来包裹textarea的普通div替换成<perfect-scrollbar>组件，同时保留原textarea的所有属性：

<perfect-scrollbar class="scroll-container" [config]="{ wheelPropagation: false }">
  <textarea 
    class="form-control textarea-box comment-box" 
    maxlength="1000" 
    [formControl]="form.controls['comment']"
  ></textarea>
</perfect-scrollbar>
<span class="maxTxt"><strong>Note:</strong> {{showMessage}}</span>

4. 添加适配样式 #

为了让滚动容器和textarea正确配合，添加以下CSS（可以放在组件的样式文件或全局样式中）：

.scroll-container {
  height: 200px; /* 根据你的需求设置固定高度 */
  width: 100%;
}

.scroll-container textarea {
  height: 100%;
  width: 100%;
  resize: none; /* 可选：禁止手动调整textarea大小 */
  overflow: hidden; /* 隐藏textarea自带滚动条，交给Perfect Scrollbar接管 */
  border: none; /* 可选：去掉textarea自带边框，避免和容器样式冲突 */
}

可选：自定义滚动条行为 #

你可以通过[config]属性自定义滚动条的表现，比如调整滚动速度、是否显示滚动按钮等，示例配置：

// 在组件类中定义配置对象
scrollConfig = {
  wheelSpeed: 1.2,
  suppressScrollX: true, // 禁用横向滚动
  minScrollbarLength: 30, // 设置滚动条最小长度
};

然后在模板中绑定这个配置：

<perfect-scrollbar class="scroll-container" [config]="scrollConfig">
  <!-- textarea代码 -->
</perfect-scrollbar>

这样设置完成后，你的textarea就会用上Perfect Scrollbar的自定义滚动条了，测试一下看看效果是否符合预期~

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