Красивый скроллбар можно сделать c помощью css, но этот способ годится не для всех браузеров, поэтому рекомендуем использовать jquery плагин Jquery Custom Content Scroller.
Скачать плагин и ознакомиться с полной документацией к нему можно перейдя по ссылке Jquery Custom Content Scroller
Сначала подключаем css и js. Для WordPress это выглядит так:

function.php

1
2
3
        wp_enqueue_style('customScrollbar-css', THEME_URI. '/css/jquery.mCustomScrollbar.min.css')
    wp_enqueue_script( 'customScrollbar-concat-js', THEME_URI. '/js/jquery.mCustomScrollbar.concat.min.js', array('jquery'), '3.1.13', true );
        wp_enqueue_script( 'my-scripts', THEME_URI. '/js/scripts.js', array('jquery'), false, true);

Нам нужно блоку с классом <div class="post-details"></div> прикрутить красивый скроллинг, для этого пишем java скрипт

script.js

1
2
3
4
5
6
  $(window).load(function(){
               $('.post-details').mCustomScrollbar({
                    autoHideScrollbar: false,
                    theme:'rounded'
                });
});

В таблице стилей к этому блоку нужно применить следующие правила:

style.css

1
2
3
 .post-details {
    max-height: 200px;
    overflow: auto; /* можно hidden */ }

Еще можно поменять цвета для ползунка, для этого нужно применить к соответствующим элементам css правила

style.css

1
2
3
4
.post-details .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #b3865b;}
.post-details .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .post-details .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .post-details .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: #ffcfab;}

Ознакомтесь с дэмо различных скроллбаров:
ajax_example
auto_hide_scrollbar_demo
auto_scrolling_example
bootstrap_examples
bootstrap_examples-extended
callbacks_example
colorbox_demo
complete_examples
disable_destroy_example
fluid_scrollbar_example
full_page_demo

Translate »
Рейтинг@Mail.ru Яндекс.Метрика