如何使用perfect-scrollbar实现滚动条仅在滚动时显示、滚动结束后隐藏

• 第一步：覆盖默认样式，禁用原生hover触发显示的逻辑

/* 关闭默认悬浮显示滚动条规则 */
.ps .ps__rail-x, 
.ps .ps__rail-y {
  opacity: 0 !important;
  transition: opacity 0.2s ease;
}
/* 自定义滚动激活态样式 */
.ps.ps--scrolling .ps__rail-x, 
.ps.ps--scrolling .ps__rail-y {
  opacity: 0.6 !important;
}

• 第二步：绑定滚动事件，动态控制滚动条显隐

// 替换为你的滚动容器DOM节点
const scrollContainer = document.querySelector('#your-scroll-wrapper');
// 初始化滚动条实例
const psInstance = new PerfectScrollbar(scrollContainer);

let hideScrollTimer = null;
scrollContainer.addEventListener('scroll', () => {
  // 滚动触发时清除待执行的隐藏任务，显示滚动条
  clearTimeout(hideScrollTimer);
  scrollContainer.classList.add('ps--scrolling');
  
  // 滚动停止300ms后隐藏滚动条，延迟时长可按需调整
  hideScrollTimer = setTimeout(() => {
    scrollContainer.classList.remove('ps--scrolling');
  }, 300);
});

• 可选兼容优化：如果需要适配触摸设备，可额外监听touchmove、touchend事件，逻辑和上述滚动事件完全一致即可。

注意：如果自定义样式被默认样式覆盖，可以调高CSS选择器优先级（比如给选择器加上容器id前缀），300ms的隐藏延迟可根据交互需求自由调整。

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