如何设置Fxp Jquery Scroller滚动条为黑色且始终可见

问题根源 #

• 自定义滚动条默认设置了display: none，仅在滚动触发时插件动态添加.scroller-active类才会显示，因此非滚动状态下看不到
• 滚动容器上写了内联样式overflow-y: scroll，和插件默认的overflow: hidden规则冲突，导致浏览器原生白色滚动条露出，覆盖了你写的自定义黑色滚动条样式

修改步骤 #

• 调整CSS规则，移除滚动条默认隐藏逻辑，让自定义滚动条常驻
• 增加跨浏览器原生滚动条隐藏规则，避免原生滚动条和自定义滚动条冲突
• 删除容器上多余的overflow-y: scroll内联属性

代码修改 #

替换原有Scroller相关CSS #

[data-scroller="true"] {
  overflow: hidden;
  /* 兼容Firefox隐藏原生滚动条 */
  scrollbar-width: none;
}
/* 兼容Webkit内核浏览器（Chrome/Edge/Safari）隐藏原生滚动条 */
[data-scroller="true"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.scroller-scrollbar {
  /* 移除原display: none配置，设置滚动条默认显示 */
  display: block;
  position: absolute;
  z-index: 1000;
  border-radius: 2px;
  /* 滚动条纯黑色，需要半透效果可降低opacity值 */
  background-color: #000;
  opacity: 1;
}
.scroller-scrollbar.vertical {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  margin: 0 2px;
}
.scroller-scrollbar.vertical.scroller-inverse {
  left: 0;
  right: inherit;
}
.scroller-scrollbar.horizontal {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  margin: 2px 0;
}
.scroller-scrollbar.horizontal.scroller-inverse {
  top: 0;
  bottom: inherit;
}
/* 删除原有的.scroller-scrollbar.scroller-active { display: block; } 规则，不再需要 */

修改textarea标签 #

删除标签内联样式中的overflow-y: scroll;属性，修改后标签代码如下：

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

效果调整 #

如果需要调整黑色滚动条的透明度，直接修改.scroller-scrollbar的opacity属性即可，取值范围0~1，数值越小滚动条越透明。

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