Полоса прокрутки на CSS как в Mac OSX Lion

Недавно, в комментариях под одной из статей, много дискутировали по поводу создания CSS полосы прокрутки как в Mac OSX Lion - минимальный темно-серый округленный прямоугольник, который появляется с края блока, только при наведении на контент. Мне кажется это интересная идея для проекта реализованного под операционные системы Mac OS или iOS. В этом уроке создадим такую полосу прокрутки, используя библиотеку jScrollPane.

Сложность

Первое что мне пришло в голову - использовать бесплатную библиотеку jScrollPane и преобразовать её в полосу прокрутки как в Mac OSX Lion, также добавить появление при наведении. jScrollPane - мощное и простое решение, для реализации полосы прокрутки внутри любого контента.

Также вы можете воспользоваться плагином nanoScrollerJS, который имеет те же возможности и вероятно предоставляет лучшую поддержку для мобильных телефонов, но если у вас есть время, всегда интересно поэкспериментировать и создать собственный плагин, чем мы и займемся в этом уроке.

HTML разметка

Плагин jPaneScroll очень прост в реализации. Для начала, подключите все необходимые javascript и css файлы:

<link type="text/css" href="/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/script/jquery.jscrollpane.min.js"></script>

После этого добавим контейнер div с классом scroll-pane, для его инициализации в jQuery скриптах.

<div class="scroll-pane">
... content here ...
</div>

CSS стили

Используем стандартный стиль плагина jScrollPane, но добавим некоторые свои изменения, зададим абсолютную позицию, с высотой в 100%, а также добавим серый цвет фона и скругленные рамки для полосы прокрутки:

.jspVerticalBar
{
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
}
 
.jspHorizontalBar
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
}
 
.jspVerticalBar *,
.jspHorizontalBar *
{
    margin: 0;
    padding: 0;
    /* fix IE 7,8 to work with jQuery fadeIn/Out */
    opacity:inherit;
    filter:inherit;
}
 
.jspDrag
{
    background: #666;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;     
    -ms-border-radius:5px;          
    -o-border-radius:5px;               
}

Javascript

Добавим встроенное событие jsp-initialised, чтобы скрыть плагин jScrollPane при первой загрузке страницы - $(this).find(bars).hide();, пример такого события вы можете увидеть на сайте управление ставками. Кроме того, у нас также есть событие hover, которое показывает и скрывает вертикальные и горизонтальные полосы прокрутки при наведении, при помощи функции .jScrollPane().hover().

$(function()
{
 
    var bars = '.jspHorizontalBar, .jspVerticalBar';
 
    $('.scroll-pane').bind('jsp-initialised', function (event, isScrollable) {
         
        //скрытие полосы прокрутки при первой загрузке
        $(this).find(bars).hide();
     
    }).jScrollPane().hover(
     
        //скрыть/показать полосу прокрутки
        function () {
            $(this).find(bars).stop().fadeTo('fast', 0.9);
        },
        function () {
            $(this).find(bars).stop().fadeTo('fast', 0);
        }
 
    );              
 
});

Перевод статьи Transform jScrollPane into Mac OSX Lion Scroll bar

Тэги: pluginjscrollpane

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.