Сделать идеальную полосу прокрутки по умолчанию

Я использую идеальную полосу прокрутки для пользовательской полосы прокрутки. Он работает нормально.Сделать идеальную полосу прокрутки по умолчанию

Но полоса прокрутки видна только при наведении указателя мыши на контейнер.

Как я могу сделать это видимым все время?

$('.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

Итак, если вы измените JSFiddle вставив следующий код в ваш 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().

Предупреждение, убедитесь, что вызов выполняется после того, как вы загрузили данные, на VueJS я должен был сделать это в функции «nextTick»:

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

Я предполагаю, что тайм-аут может тоже работает.

источник

2017-11-20 14:55:31 FloFu

Сделать идеальную полосу прокрутки по умолчанию

ответ

Смежные вопросы