[英]Make perfect scrollbar visible by default
我正在为自定义滚动条使用完美的滚动条。 它工作正常。
但是滚动条只有在您将鼠标悬停在容器上时才可见。
我如何让这个一直可见？
$('.container').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>
此外，您必须确保完美滚动条在正确的时间更新。 如果内容是动态加载的，则调用ps.update() 。
警告，请确保在加载数据后进行调用，在 VueJS 上，我必须在“nextTick”函数中执行此操作：
this.$nextTick(() => {
ps.update();
});
},
我想超时也可能有效。
.ps__rail-x,
.ps__rail-y {
opacity: 0.6;
}
这对我有用。
试试这个。 即使您的应用程序中不存在容器类，这也将起作用
.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
opacity: 0.6;
}
我在Angular 8 中使用 ngx-perfect-scrollbar 并通过添加以下样式解决了问题
.ps > .ps__rail-x,
.ps > .ps__rail-y {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
.container .content { background-color: red; width: 1280px; height: 720px; }
</style>
<style>
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Default</h1>
<div class="container">
<div class="content">
</div>
</div>
<h1>Always visible</h1>
<div class="container always-visible">
<div class="content">
</div>
</div>
<script>
window.onload = function () {
[].forEach.call(document.querySelectorAll('.container'), function (el) {
Ps.initialize(el);
});
};
</script>
</body>
</html>
我有同样的问题。 确保先渲染内容，然后再创建滚动条。 不需要更改 CSS。 我正在使用Perfect-scrollbar.jquery.js
完美滚动条默认滚动条保留，“完美滚动条”不起作用
[英]perfect-scrollbar default scrollbar remains and the “perfect-scrollbar” not functional
隐藏默认浏览器滚动条而不会溢出：使用“完美滚动条”时隐藏
[英]Hide default browser scroll bar without overflow:hidden when using Perfect Scrollbar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.