Rendre la barre de défilement parfaite visible par défaut

J'utilise une barre de défilement parfaite pour la barre de défilement personnalisée. Cela fonctionne bien.Rendre la barre de défilement parfaite visible par défaut

Mais la barre de défilement est visible uniquement lorsque vous passez la souris sur le conteneur.

Comment est-ce que je rends cela visible tout le temps?

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

Demo

Source

2016-11-11 user6725932

J'ai mis à jour ma réponse après avoir joué avec votre exemple. Copiez et collez mon code comme dans le bas de ma réponse. –

Du wiki perfectscrollbar:

Comment puis-je faire les barres de défilement toujours visible?

La raison pour laquelle il est masqué par défaut est cette opacité: 0 est utilisé. Veuillez changer toutes les références de celui-ci à l'opacité: 0.6. Si vous utilisez .scss, modifiez la ligne @include opacity (0) à @include opacity (0.6) dans le fichier mixin scrollbar-rail-default et exécutez gulp build pour construire les fichiers .css et .min.css.

Si vous ne souhaitez pas modifier les fichiers CSS mais que vous voulez que il soit toujours visible, veuillez ajouter les lignes suivantes partout perfect-scrollbar.css est chargé.

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

En outre, un exemple de code peut être utile de voir comment y parvenir.

Voici exemple https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html

Donc, si vous modifiez votre jsFiddle en collant les éléments suivants dans votre code html, cela fonctionne.

<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>

Source

2016-11-11 13:18:58

J'ai essayé ceci mais n'ai pas fonctionné – user6725932

Modifiez votre JSFiddle pour inclure ce CSS et laisse voir .... –

Veuillez mettre à jour votre violon. J'ai ajouté ces lignes au mien et cela a parfaitement fonctionné. Désolé, je n'ai pas pu trouver de lien pour le violon. –

<!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>

Source

2016-11-11 13:20:00 MarcoS

essayer. Cela fonctionnera même si la classe conteneur n'existe pas dans votre application

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

Source

2017-10-18 11:41:51

En outre, vous devez vous assurer-scrollbar parfait est mis à jour au bon moment. Si le contenu est chargé dynamiquement, appelez ps.update().

Avertissement, assurez-vous que l'appel est effectué après vos données est chargé, sur VueJS que je devais faire dans la fonction « nextTick »:

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

Je suppose un délai d'attente peut fonctionne aussi.

Source

2017-11-20 14:55:31 FloFu

Rendre la barre de défilement parfaite visible par défaut

Répondre

Questions connexes