使完美的滚动条默认可见

Question

我正在为自定义滚动条使用完美滚动条。它工作正常。

但滚动条仅在您将鼠标悬停在容器上时可见。

我如何使它始终可见？

 $('.container').perfectScrollbar();

演示

原文由 user6725932 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 perfectscrollbar 维基：

如何使滚动条始终可见？

它默认隐藏的原因是使用了 opacity: 0 。请将它的所有引用更改为不透明度：0.6。如果使用 .scss，请在 scrollbar-rail-default mixin 中将行 @include opacity(0) 修改为 @include opacity(0.6) 并运行 gulp build 以构建 .css 和 .min.css 文件。

如果您不想修改 CSS 文件但想让它始终可见，请在加载 perfect-scrollbar.css 后的任何位置添加以下行。

.ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }

此外，示例代码可能有助于了解如何实现它。

这是示例 https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html

因此，如果您通过将以下内容粘贴到您的 html 中来修改您的 JSFiddle，它就可以工作。

 <div class="container">
  <div class="content"></div>
</div>

<style>
    .ps-container > .ps-scrollbar-x-rail,
    .ps-container > .ps-scrollbar-y-rail {   opacity: 0.6; }
 </style>

原文由 Vanquished Wombat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

此外，您必须确保在正确的时间更新 perfect-scrollbar。如果内容是动态加载的，调用 ps.update() 。

警告，确保调用是在加载数据后进行的，在 VueJS 上我必须在 ‘nextTick’ 函数中进行调用：

     this.$nextTick(() => {
          ps.update();
      });
    },

我想超时也可能有效。

原文由 FloFu 发布，翻译遵循 CC BY-SA 3.0 许可协议