デフォルトで完璧なスクロールバーを表示する

私はカスタムスクロールバーに完全なスクロールバーを使用しています。それは正常に動作しています。デフォルトで完璧なスクロールバーを表示する

スクロールバーは、コンテナにマウスを重ねると表示されます。

これはどのように表示するのですか？ perfectscrollbarのwikiから

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

Demo

出典

2016-11-11 user6725932

あなたの例を試した後に私の答えが更新されました。答えの一番下にコードをコピーして貼り付けてください。 –

：

は、どのように私は、スクロールバーを常に表示することができますか？

デフォルトで隠されているのは、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>

出典

2016-11-11 13:18:58

私はこれを試しましたが、仕事はしませんでした – 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>

出典

2016-11-11 13:20:00 MarcoS

これを試してみてください。これは、コンテナクラスを使用すると、完璧な、スクロールバーが適切なタイミングで更新されていることを確認する必要がまた、あなたのアプリケーション

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

出典

2017-10-18 11:41:51

に存在しない場合でも動作します。コンテンツが動的に読み込まれる場合は、ps.update()に電話してください。私はタイムアウトがあまりにも働くことが推測

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

：警告

、あなたのデータがロードされた後、コールが、私は「nextTick」関数でそれをしなければならなかったVueJSに、作られていることを確認します。

出典

2017-11-20 14:55:31 FloFu

デフォルトで完璧なスクロールバーを表示する

答えて

関連する問題