如何将Fxp Jquery Scroller自定义滚动条设置为黑色

滚动条显示为白色是两处配置错误导致的：

• 滚动容器（textarea）写了内联样式overflow-y: scroll，内联样式优先级高于插件默认的[data-scroller="true"] { overflow: hidden; }规则，导致浏览器原生的浅色默认滚动条没有被隐藏，直接盖在自定义滚动条上层显示。
• 现有CSS只设置了滚动条容器的背景色，Fxp Jquery Scroller生成的可拖动滑块是独立的子元素，默认样式为浅白色，没有被自定义样式覆盖。

1. 移除textarea标签内联样式中的overflow-y: scroll属性，让插件隐藏原生滚动条的规则正常生效，修改后标签代码如下：

<textarea class="content container" data-scroller="true" data-prevent-mouse-scroll="true" style="border-radius: 25px;" rows="10" cols="10">

2. 补充滚动条滑块的样式规则，注意确保这段自定义CSS写在scroller.css的引入语句之后，建议加上!important提升优先级，避免被插件默认样式覆盖，代码如下：

/* 自定义滚动条轨道和滑块为黑色 */
.scroller-scrollbar,
.scroller-scrollbar .scroller-scrollbar-thumb {
  background-color: #000 !important;
  opacity: 0.32;
}

/* 滚动条激活（滚动/悬停）状态下的透明度，可按需调整数值 */
.scroller-scrollbar.scroller-active {
  opacity: 0.6;
}

3. （可选）移除scroller.js标签上的async="async"属性，避免插件异步加载导致的初始化时序问题，确保自定义滚动条正常渲染。

修改完成后刷新页面即可看到黑色的自定义滚动条，可根据实际需求调整opacity值修改滚动条透明度。

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