默認情況下使完美的滾動條可見

我正在使用自定義滾動條的完美滾動條。它工作正常。默認情況下使完美的滾動條可見

但是，只有當您將鼠標移到容器上時，滾動條纔可見。

我該如何讓這一切始終可見？

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

Demo

來源

2016-11-11 user6725932

我玩過你的例子後更新了我的答案。複製並粘貼我的代碼，如我的答案的底部。 –

從perfectscrollbar維基：

如何使滾動條始終可見？

它默認隱藏的原因是使用了不透明度：0。請將它的所有參考改爲不透明度：0.6。如果使用.scss，修改滾動條軌道默認混合中的@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>

來源

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()。

警告，確保您的數據被加載後，電話就被打出，在VueJS我不得不這樣做在「nextTick」功能：

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

我猜超時可能也工作。

來源

2017-11-20 14:55:31 FloFu

默認情況下使完美的滾動條可見

回答

相關問題