scroll

Красивый скроллбар можно сделать 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 Яндекс.Метрика