私はカスタムスクロールバーに完全なスクロールバーを使用しています。それは正常に動作しています。デフォルトで完璧なスクロールバーを表示する
スクロールバーは、コンテナにマウスを重ねると表示されます。
これはどのように表示するのですか? perfectscrollbarのwikiから
$('.container').perfectScrollbar();
私はカスタムスクロールバーに完全なスクロールバーを使用しています。それは正常に動作しています。デフォルトで完璧なスクロールバーを表示する
スクロールバーは、コンテナにマウスを重ねると表示されます。
これはどのように表示するのですか? perfectscrollbarのwikiから
$('.container').perfectScrollbar();
:
は、どのように私は、スクロールバーを常に表示することができますか?
デフォルトで隠されているのは、opacity:0が使用されているからです。 すべての参照を不透明度:0.6に変更してください。 .scssを使用する場合は scrollbar-rail-defaultミックスインで@include opacity(0)を@include opacity(0.6)に変更し、gulpビルドを実行して.cssをビルドし、 .min.cssファイルをビルドします。
CSSファイルを変更するつもりはないが、常に にしたい場合は、 perfect-scrollbar.cssがロードされた後に次の行を追加してください。
.ps-container > .ps-scrollbar-x-rail, .ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }
また、サンプルコードは、それを達成する方法を確認するために役立つかもしれません。ここで
あなたのhtmlに次のように貼り付けて、あなたのJSFiddleを変更するのであればhttps://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html
一例である、それが動作します。
<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>
私はこれを試しましたが、仕事はしませんでした – user6725932
JSFiddleを修正してCSSを修正してみました.... –
あなたのフィドルを更新してください。私はこれらの行を私のものに追加し、それは完全に機能しました。申し訳ありませんが、私はフィドルのリンクを取得できませんでした。 –
<!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>
これを試してみてください。これは、コンテナクラスを使用すると、完璧な、スクロールバーが適切なタイミングで更新されていることを確認する必要がまた、あなたのアプリケーション
.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
opacity: 0.6;
}
に存在しない場合でも動作します。コンテンツが動的に読み込まれる場合は、ps.update()
に電話してください。私はタイムアウトがあまりにも働くことが推測
this.$nextTick(() => {
ps.update();
});
},
:警告
、あなたのデータがロードされた後、コールが、私は「nextTick」関数でそれをしなければならなかったVueJSに、作られていることを確認します。
あなたの例を試した後に私の答えが更新されました。答えの一番下にコードをコピーして貼り付けてください。 –