Simplebar滚动条不显示主因是容器未挂载或尺寸为0；需确保DOM就绪、overflow:hidden、有固定高度，并在offsetHeight>0后初始化。
Simplebar 初始化后滚动条不显示，常见原因是什么
Simplebar 不是 CSS 覆盖就能生效的“样式库”，它依赖 DOM 就绪和容器尺寸计算。最常踩的坑是：在 document.createElement 后立刻调用 new SimpleBar()，但此时容器还没挂载、宽高为 0，插件直接跳过渲染。
- 容器必须有明确的
overflow: hidden和固定高度（或能被 JS 正确读取的clientHeight） - 若容器是动态插入的（比如 Vue/React 组件 mount 后），需确保在
offsetHeight > 0之后再初始化 - 使用
resizeObserver时注意：Safari 旧版不支持，Simplebar v6+ 默认启用，可设autoHide: false临时绕过
const container = document.querySelector('.scrollable');
if (container.offsetHeight > 0) {
new SimpleBar(container, { autoHide: false });
}
如何让 Simplebar 在 Firefox 和 Safari 下表现一致
Firefox 对 overscroll-behavior 支持较晚（v79+），Safari 则长期不支持该属性，导致下拉刷新或嵌套滚动时出现原生滚动条“闪现”。Simplebar 本身不接管 overscroll 行为，得手动补。
- 必须给容器加
overscroll-behavior: none，并在不支持的浏览器中用 JS 拦截touchmove事件 - Safari 下若容器内有
input[type="range"]或iframe，可能触发原生滚动捕获，建议加pointer-events: none临时规避（再用data-simplebar-ignore排除） - 不要依赖
scrollbar-width: none（仅 Firefox 有效），它和 Simplebar 无协同机制
Simplebar 的 scrollableNode 和 contentNode 怎么选
这两个配置项决定滚动作用域和内容包裹逻辑，选错会导致监听失效或滚动卡顿。
-
scrollableNode是实际监听 scroll 事件的节点，通常就是传入的容器本身；除非你把滚动委托给父级（如 sticky header 场景），否则别动它 -
contentNode是被包裹进.simplebar-content的节点，默认是容器第一个子元素；如果你的结构是<div class="wrap"> <header></header><main></main> </div>，且只希望<main></main>可滚，就得显式设contentNode: container.querySelector('main') - 设错
contentNode会导致scrollTop同步失败，调试时可检查生成的.simplebar-content是否正确包裹目标节点
React/Vue 项目里销毁 Simplebar 实例要注意什么
框架卸载组件时若没清理，会留下事件监听器和 DOM 节点引用，造成内存泄漏，尤其在列表页频繁切换时。
立即学习“前端免费学习笔记（深入）”；
- 必须调用实例的
unMount()方法（不是destroy()，后者 v6 已废弃） - React 中在
useEffect的 cleanup 函数里调用；Vue 2 在beforeDestroy，Vue 3 在onBeforeUnmount - 如果用了
data-simplebar自动初始化，得手动查到实例：SimpleBar.instances.get(container)，再调unMount() - 不要只删 DOM 节点——Simplebar 插入的
.simplebar-scrollbar等节点由它自己管理，强行移除会破坏状态同步
Simplebar 的核心约束很实在：它不 hack 浏览器滚动机制，而是用一层 DOM 模拟 + 原生 scroll 事件桥接。这意味着任何绕过它生命周期的操作（比如直接改 scrollTop、用 scrollIntoView、CSS 动画触发布局重排）都容易让它掉帧或失位。真要用这些操作，记得配套调 recalculate()。
