Как поменять скролл бар на сайте - Сайт о строительстве

Содержание

Стилизация полосы прокрутки с помощью CSS

Сегодня поговорим о полосе прокрутки страниц. А точнее про ее внешний вид, который толком не меняется уже несколько десятилетий. И мне, собственно как и вам, она изрядно поднадоела. По этому мы рассмотрим возможность о ее замене на свою.

Данное решение является очень удобным, так, как здесь не задействуются JavaScript. Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.

Установка

Вставляем данный код в Таблицу стилей (CSS)

Код

::-webkit-scrollbar-button { background-image:url(”); background-repeat:no-repeat; width:5px; height:0px } ::-webkit-scrollbar-track { background-color:#ecedee } ::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color:#6dc0c8; } ::-webkit-scrollbar-thumb:hover{ background-color:#56999f; } ::-webkit-resizer{ background-image:url(”); background-repeat:no-repeat; width:4px; height:0px } ::-webkit-scrollbar{ width: 4px;

}

Установка на этом завершена. Теперь разберем, какая строка за что отвечает.

Цвет дорожки, по которой двигается бегунок прокрутки.

Меняем ecedee на свой цвет.

Код

::-webkit-scrollbar-track { background-color:#ecedee

}

Цвет бегунка полосы, а так же его закругление.

Меняем 6dc0c8 на свой цвет.

Меняем значение border-radius для закругления.

Код

::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color:#6dc0c8;

}

Цвет бегунка при наведении на него курсора.

Меняем 56999f на свой цвет.

Код

::-webkit-scrollbar-thumb { -webkit-border-radius: 0px; border-radius: 0px; background-color:#6dc0c8;

}

Основная ширина полосы прокрутки.

Меняем значение width

Код

::-webkit-scrollbar{ width: 4px;

}

Пример

В качестве примера мы сделали прокрутку в таком стиле:

Установите на сайт данный скролл, просто скопировав следующий код:

Код

::-webkit-scrollbar-button { background-image:url(”); background-repeat:no-repeat; width:6px; height:0px } ::-webkit-scrollbar-track { background-color:#32312e; box-shadow:0px 0px 3px #000 inset; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background-color:#ffcb17; box-shadow:0px 1px 1px #fff inset; background-image:url(‘https://yraaa.ru/_pu/24/59610063.png’); background-position:center; background-repeat:no-repeat; } ::-webkit-resizer{ background-image:url(”); background-repeat:no-repeat; width:7px; height:0px } ::-webkit-scrollbar{ width: 11px;

}

Как изменить полосу прокрутки, скроллбар на сайте

Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать.

тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд.

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

Обратите внимание

Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Строка с ссылкой на библиотеку:

Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js. В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.

Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:

В данном примере есть только одна настройка — указана тема оформления dark-3. Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.

light
dark
light-2
dark-2
light-thick
dark-thick
light-thin
dark-thin
rounded
rounded-dark
rounded-dots
rounded-dots-dark
3d
3d-dark
3d-thick
3d-thick-dark
minimal
minimal-dark
light-3
dark-3
inset
inset-dark
inset-2
inset-2-dark
inset-3
inset-3-dark

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

Есть такой параметр как scrollInertia. Он задает скорость анимации прокрутки. В примере, что был вверху статьи, при прокрутке ощущается задержка, плавность. Это сделано для придания необычности рядовой полосе прокрутки. В примере установлено значение 3000. В итоге, код будет таким:

Как видите, просто через запятую добавили и все. Если вы опытный верстальщик и хотите узнать про еще больше возможностей, то можно прочитать о них на сайте разработчика — http://manos.malihu.gr/jquery-custom-content-scroller/

Чтобы все темы оформления и вообще полоса прокрутки отображалась правильно нужно подключать стили CSS.

Если вы не особо хотите заморачиваться, то просто подключайте файл стилей, что так же лежит в скачанном вами архиве и называется — custom_scrollbar.css. Если же заморочится, то из него можно взять только основные моменты.

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

Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.

body{ margin: 0; padding: 0; } html, body{ height: 100%; }

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

На этом все, спасибо за внимание.

Пользовательские скроллбары в WebKit

Оригинал: http://css-tricks.com/custom-scrollbars-in-webkit

Перевод: Влад Мержевич

Вернёмся назад, когда вы могли настроить скроллбары в IE (5.5) с помощью нестандартных свойств типа scrollbar-base-color, которые применялись к элементам с полосами прокрутки (вроде body), и делать потрясные штуки. IE теперь не тот.

В наши дни пользовательские скроллбары вернулись, но теперь наступило время WebKit. Это несколько лучше, поскольку свойства содержат вендорный префикс (например ::-webkit-scrollbar) и используют «Shadow DOM». Всё это работает уже несколько лет. Дэвид Хаятт в начале 2009 года показал в своём блоге пример страницы со всевозможными полосами прокрутки, о которых вы могли только мечтать.

Необходимое

Разные части

Вот псевдоэлементы, отвечающие за разные части полос прокрутки.

CSS

::-webkit-scrollbar { /* 1 — скроллбар */ }
::-webkit-scrollbar-button { /* 2 — кнопка */ }
::-webkit-scrollbar-track { /* 3 — трек */ }
::-webkit-scrollbar-track-piece { /* 4 — видимая часть трека */ }
::-webkit-scrollbar-thumb { /* 5 — ползунок */ }
::-webkit-scrollbar-corner { /* 6 — уголок */ }
::-webkit-resizer { /* 7 — изменение размеров */ }

Различные состояния

Это псевдоселекторы, они позволяют точнее выбирать разные части полосы прокрутки, когда они находятся в различных состояниях.

CSS

:horizontal
:vertical
:decrement
:increment
:start
:end :double-button
:single-button
:no-button
:corner-present
:window-inactive

Я украду целый раздел с поста Дэвида из блога WebKit, потому что он хорошо объясняет каждую часть.

:horizontal — применяется к любому скроллбару, который имеет горизонтальную ориентацию.

:vertical — применяется к любому скроллбару, который имеет вертикальную ориентацию.

:decrement — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека уменьшена в процессе использования (вверх для вертикального скроллбара и влево для горизонтального).

:increment — применяется к кнопкам и к видимой части трека, сообщает, что нет кнопок или видимая часть трека увеличена в процессе использования (вниз для вертикального скроллбара и вправо для горизонтального).

:start — применяется к кнопкам и к видимой части трека, сообщает, что объект находится перед ползунком.

:end — применяется к кнопкам и к видимой части трека, сообщает, что объект находится после ползунка.

:double-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка является частью пары кнопок, которые находятся вместе в конце скроллбара. Для видимой части трека сообщает, что она примыкает к паре кнопок.

:single-button — применяется к кнопкам и к видимой части трека, используется для определения того, что кнопка в конце скроллбара единственная. Для видимой части трека сообщает, что он примыкает к этой единственной кнопке.

:no-button — применяется к видимой части трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, нет кнопки в конце трека.

:corner-present — применяется ко всем элементам скроллбара и сообщает, что имеется уголок.

:window-inactive — применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

Теперь всё вместе

Эти псевдоэлементы и псевдоклассы работают совместно. Вот несколько случайных примеров.

::-webkit-scrollbar-track-piece:start { /* Выделение верхней половины (или левой половины) трека */
} ::-webkit-scrollbar-thumb:window-inactive { /* Выделение ползунка, когда окно браузера не активно */
} ::-webkit-scrollbar-button:horizontal:decrement:hover { /* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */
}

Очень простой пример

Чтобы сделать действительно простой пользовательский скроллбар мы добавим это.

::-webkit-scrollbar { width: 12px;
} ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;
} ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

И получим следующий результат на простом с переполненным вертикальным текстом.

В диких условиях

Отмечу очень тонкий и симпатичный скроллбар в блоге Тима Ван Дамма Maxvoltar (сайт Тима больше не использует этот дизайн).

Особенно приятно, что скроллбар применяется к элементу body, но полосы прокрутки не прилипают к верхнему, нижнему или правому краю окна браузера, где они обычно находятся. Я сделал тестовую страницу скопировав и вставив код для достижения аналогичного эффекта.

Посмотреть демо

На Forrst используются пользовательские скроллбары для фрагментов кода, которые также довольно хороши. Они визуально менее насыщенные, из-за чего не очень сочетаются с подсветкой кода.

Меняем скроллбар на сайте. CSS. JavaScript

Механизм системного скролла реализуется на уровне базовых возможностей операционной системы, поэтому с уверенностью можно сказать, что он всегда лучше js-эмуляции: он производительнее, работает независимо от JavaScript и реализует все необходимые «фичи» системы для разного типа устройств.

Дизайн системного скроллбара способен изуродовать значительную часть сайтов интернета.

Доброго времени суток!

Хочу немножко покопаться в окрестностях данной темы.

На момент написания статьи, более или менее гибко кастомизировать скроллбар средствами CSS можно только в браузерах на движке webkit.

Сразу пример:
Пропишем несколько строк и откроем страницу в том же chrome:

// SCROLL ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.

Важно

3); /*border-radius: 3px;*/ } ::-webkit-scrollbar-thumb { // border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

В остальном это попытки большого числа js-библиотек, более половины которых подменяют нативный механизм скролла.

При таком подходе возникает сразу два фундаментальных недостатка: отсутствие кроссбраузерности и отсутствие же кроссплатформенности.

Когда-то я использовал jScrollPane. На тот момент плагин вполне справлялся со своей задачей, но сейчас понимаю, что на странице генерируется куча мусора, которую сложно контролировать.

Вообще, все подобные решения — УЖаС, по этому лучше закройте эту статью и призывайте всех перейти на лучший браузер в мире.

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

Поставим задачу (а это пол дела!):

Скрыть системный скроллбар

Отобразить кастомный скроллбар.

Все должно быть максимально просто и понятно, а подключение не требует дополнительных махинаций

В особенности хочу обратить внимание на третий пункт. Решения, что требуют для себя слишком многое — в пекло. Есть архитектура приложения, и ничто не должно на нее сильно влиять. Иначе — будем грести проблемы с поддержкой в будущем.

Например, раньше, чтобы поставить Яндекс карты, нужно было написать целое сочинение. Сейчас они все упаковали в одну строчку.

Я опишу идею, которая может быть будет кому-то полезна в велосипедостроении ?

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit

LESS

.t-scroll-container { overflow: hidden !important; /* Прячем прокрутку */ position: relative; & > .

t-scroll { /* Полоса, по которой будет бегать наш ползунок */ position: absolute; right: 0px; top: 0; width: 12px; background: rgb(243, 247, 254); z-index: 2; button { /* Ползунок, собственно ? */ position: absolute; right: 0; top: 0; width: 10px; height: 50px; background: #b6b6b6; border-radius: 4px; } } }

var makeThis = function(el) { if (!el.length) return false; var el = $(el[0]); if (el.hasClass(‘t-scroll-container’)) // Если мы уже тут были, уходим return false; // Формируем наш ползунок. Все просто: div, внутри button var scroll = $(”).append(”); el.append(scroll); el.

addClass(‘t-scroll-container’); // Update var change = function() { // Если скролл не нужен — прячем if (!(el[0].scrollHeight — el.outerHeight())) el.find(‘ > .t-scroll’).hide(); // Задаем высоту полоски под ползунком el.find(‘ > .t-scroll’).css(‘height’, el[0].scrollHeight); // Высчитываем высоту ползунка.

// Как вариант — можно задать фиксированное значение или переписать var butH = el.outerHeight() / 6; var scrollDelta = (el[0].scrollHeight — el.outerHeight()); if (el.outerHeight() < scrollDelta) butH = butH / (scrollDelta / el.outerHeight()); butH = Math.max(butH, 30); el.find(‘ > .t-scroll button’).

Совет

css(‘height’, butH); } change(); // Запоминаем смещение скролла и // расстояние между точкой клика на кнопку и верзней грани ползунка el[0].bScroll = { delta: Math.min(el.outerHeight() / 3, (el[0].scrollHeight — el.outerHeight()) / 4), offsetY: 0 } // var mouseUp = function(e) { window.

removeEventListener(‘mousemove’, mouseMove); } // var mouseMove = function(e) { if (!el[0].bScroll) return false; // Получили высоту кнопки var butH = el.find(‘ > .t-scroll button’).outerHeight(); // Считаем разницу var diff = -(el.offset().top — $(window).scrollTop() — e.clientY) — el[0].bScroll.offsetY; // Находим процент прокрутки / 100 h = diff / (el.

outerHeight() — butH); h = Math.max(h, 0); h = Math.min(h, 1); // Новую позицию var fScrollTop = h * (el[0].scrollHeight — el.outerHeight()); // Двигаем документ el.scrollTop(fScrollTop); // Находим позицию ползунка var scrollPos = fScrollTop + h * (el.outerHeight() — butH); // Двигаем el.find(‘.t-scroll button’).

css(‘top’, scrollPos); return false; } // var scrollTo = function(fScrollTop) { // Ограничения fScrollTop = Math.max(fScrollTop, 0); fScrollTop = Math.min(fScrollTop, el[0].scrollHeight — el.outerHeight()); // Защита от деления на 0 if (!(el[0].scrollHeight — el.outerHeight())) return false; // Ищем позицию ползунка var h = fScrollTop / (el[0].scrollHeight — el.

outerHeight()); var pos = fScrollTop + el.outerHeight() * h; pos -= el.find(‘.t-scroll button’).outerHeight() * h; // Двигаем el.find(‘.t-scroll button’).stop().animate({ top: pos, }, ‘fast’); el.stop().animate({ scrollTop: fScrollTop, }, ‘fast’); } // EVENTS el.on(‘DOMNodeInserted resize’, function(e) { change(); scrollTo(el.

scrollTop()); }); // MOUSE WHEEL el.on(‘DOMMouseScroll mousewheel’, function(e) { if (!el[0].bScroll) return false; var fScrollTop = el.scrollTop() — Math.sign(e.originalEvent.wheelDelta || -e.originalEvent.detail) * el[0].bScroll.delta scrollTo(fScrollTop); return false; }); // MOUSEDOWN el.find(‘ > .t-scroll button’).off(‘mousedown’); el.

find(‘ > .t-scroll button’).on(‘mousedown’, function(e) { if (!el[0].bScroll) return false; el[0].bScroll.offsetY = e.offsetY; window.addEventListener(‘mouseup’, mouseUp); window.addEventListener(‘mousemove’, mouseMove); }); }

Все, что нам осталось, это вызвать makeThis для нашего ul

$(document).ready(function() { makeThis($(‘.it-is-me’)); });

Обработку touchstart, touchmove, touchup можно посмотреть в коде примера ниже или написать самостоятельно по аналогии ?

Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit

Стилизация пользовательского скроллбара с помощью CSS и Jquery

Наверняка вы видели сайты с оригинальными полосами прокрутки. Это достигается с помощью нового CSS scroll свойства webKit-scrollbar. К сожалению, оно работает только в браузерах на движке WebKit. Но поддерживается jQuery почти во всех обозревателях. Давайте выполним стилизацию скроллбара.

Данное свойство поддерживается версиями Google Chrome для настольных компьютеров и мобильных устройств, Apple Safari, Flock, OmniWeb.

Даже если вы создаете дизайн только для этих браузеров без использования jQuery, то сможете охватить только 72% пользователей интернета.

Но если у вас нет аллергии на программирование, то можете быть уверены, что каждый ваш посетитель увидит красиво стилизованный скроллбар.

Стилизация скроллбара

Полосы прокрутки реализованы там, где длина контента превышает ширину окна контейнера. Благодаря этому вы получаете возможность стилизовать iframe, элементы div и поле ввода текста.

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

Установка свойству overflow значения scroll говорит браузерам о том, что нужно выводить полосы прокрутки в случае переполнения окна контентом:

//Контейнер, заполненный контентом .container { width: 100px; height: 100px; overflow: scroll; }

Это код scrolling CSS покажет полосу прокрутки такой (справа)

Использование псевдоэлементов CSS для настройки скроллбара

IE5.5 был первым браузером, поддерживающим основные стили для скроллинга. Используя свойство scrollbar-face-color, можно были изменить цвет полос прокрутки.

Хотя это и не добавляло большого разнообразия, но все же лучше, чем стандартная полоса прокрутки в браузере.

Поскольку это свойство по-прежнему поддерживается в Internet Explorer, его можно использовать для пользователей, предпочитающих этот браузер.

Обратите внимание

Для WebKit-браузерах в CSS существует множество вариантов стилизации: изменение цвета и ширины полосы прокрутки, ползунков. Элементы скроллинга можно выбрать с помощью следующих псевдоэлементов.

::webkit-scrollbar — позволяет настроить ширину и цвет полосы прокрутки. Когда этот псевдоэлемент указан, WebKit выключает свой встроенный рендеринг скроллбара и использует настройки, указанные для div scroll CSS. Обратите внимание, что при этом будут выбраны все полосы прокрутки, присутствующие на странице. Если нужно настроить скроллбар для определенного элемента, необходимо применить это свойство к конкретному элементу:

/* Для всех скроллбаров */ ::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } /* Для определенных скроллбаров */ .mybox::-webkit-scrollbar { width: 12px; background-color: #434343; }

::-webkit-scrollbar-thumb – Это ползунок скроллбара (чем вы держите и прокручиваете страницу). Он может иметь цвет или использовать градиент в качестве фона. Пример реализации:

::-webkit-scrollbar-thumb { width: 8px; background-image: -webkit-linear-gradient(#F5F5F5, #8A8A8A); }

::-webkit-scrollbar-track – позволяет настроить трек скроллбара (путь движения ползунка). Синтаксис псевдоэлемента для CSS scroll:

::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border: 1px solid black; background-color: #F5F5F5; }

::-webkit-scrollbar-button – разработчики CSS3 не упускают из виду маленькие кнопки на концах полосы прокрутки. Их также можно настроить, так как они помогают, когда страница длинная и скроллбар становится слишком маленьким для прокрутки. Это свойство стиля верхнего и нижнего углов (или левого и правого для горизонтальных полос прокрутки):

::-webkit-scrollbar-button { background-color: #7c2929; }

::-webkit-scrollbar-corner – позволяет справиться с ситуацией, когда появляются обе полосы прокрутки и пересекаются в углу:

::-webkit-scrollbar-corner { background-color: #b3b3b3; }

Вот несколько примеров, которые демонстрируют силу свойства scrolling CSS.

Посмотреть примеры

Настройка скроллбара с помощью Jquery

Если вам нравится программирование front-end, вы можете использовать Jquery-плагин JScrollPane. Он довольно прост в использовании.

После того, как вы загрузили и подключили соответствующие файлы в заголовке документа, нужно вызвать одну Javascript-функцию для инициализации панели прокрутки.

Вы можете легко изменить дизайн полосы прокрутки с помощью CSS или выбрать одну из существующих тем.

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

Если вы захотите изменить настройки CSS scroll по умолчанию, предоставленные JScrollPane, нужно редактировать стили соответствующих элементов:

.jspTrack { background: #b46868; position: relative; } .jspDrag { background: #c43232; position: relative; cursor: pointer; }

Вывод

Пользовательские скроллбары больше не являются редкостью. Вы найдете их на большинстве сайтов и блогов. А с JScrollPane стало гораздо проще создавать и отображать стилизованные полосы прокрутки во всех браузерах. Надеюсь, этот урок оказался для вас полезным.

Перевод статьи “Scrollbar styling using CSS and Jquery” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Как изменить полосу прокрутки на сайте (+ 26 готовых тем)

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

Так же предлагаю взглянуть:

Демо Ι Скачать

Плавная прокрутка

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

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

Полоса прокрутки

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

Скрипт

После того как вы смогли установить плавную прокрутку на сайт, можно приступать к изменению темы, иначе полоса работать не будет.

Нам нужно найти скрипт, который мы ставили перед закрывающем тегом , вот он:

Тут есть очень интересная строчка theme:»dark-thin», где dark-thin это название темы для полосы прокрутки. Чтобы изменить стиль полосы, нам нужно всего лишь изменить название темы. Проще простого.

Где взять название темы для полосы?

В файле jquery.mCustomScrollbar.css который находится в исходниках. Или же вот вам полный перечень тем:

light
dark
light-2
dark-2
light-thick
dark-thick
light-thin
dark-thin
rounded
rounded-dark
rounded-dots
rounded-dots-dark
3d
3d-dark
3d-thick
3d-thick-dark
minimal
minimal-dark
light-3
dark-3
inset
inset-dark
inset-2
inset-2-dark
inset-3
inset-3-dark

Соответственно темы с приставкой dark для сайтов со светлым оформлением, а с приставкой light для тёмных сайтов. Ещё раз повторюсь Вам нужно только скопировать слово и вставить его в то место в скрипте о котором я говорил немного выше.

И ещё, в демо не полный перечень тем.

Демо Ι Скачать

Вывод

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

Если Вам вдруг что либо не понятно, обязательно спрашивайте в комментариях. Надеюсь данный урок оказался для вас полезным.

Красивое оформление скроллбара с помощью CSS

ZorNet — портал для вебмастера » HTML и CSS » Красивое оформление скроллбара с помощью CSS

Сейчас на современном дизайне сайте не удивить оригинальной прокруткой, здесь главное как ее поставить, что и узнаем из материала. Что безусловно не очень сложно, это первое, так как нужно только поставить стиль, который автоматически изменит полностью стиль прокрутки. Это он стандартной, которую показывают браузеры, до оригинальной, где сам веб мастер уже самостоятельно может подобрать цветовую палитру. Что теперь можно поставить на отдельную страницу, как к примеру презентация или другая информация, так и на полноценный сайт. Браузеры на основе WebKit обладают отличным свойством, которое позволяет вам наметить, как полосы прокрутки выглядят на сайте с помощью очень гибких псевдоэлементов. Поскольку это только псевдоэлементы, вы можете выбрать, какой элемент вы хотите использовать для прокрутки. Элемент управления Scrollbar позволяет пользователю прокручивать изображение или другое представление, которое слишком велико, чтобы видеть полностью. Обратите внимание, что аналогичное управление слайдером используется для выбора числовых значений, а не прокрутки. Знакомые примеры включают вертикальную полосу прокрутки со стороны текстового редактора и вертикальную и горизонтальную пару баров для просмотра части большого изображения или карты.

Простой стиль

Используя эти новые псевдоэлементы и некоторые простые стили, вы можете создавать красивые полосы прокрутки для тела вашего сайта. CSS::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f7efef; border-radius: 5px; } ::-webkit-scrollbar-thumb { background: #a5a2a2; border-radius: 5px;

}

Градиентный стильВозможно, плоские простые полосы прокрутки, это не ваш стиль, где образец прокрутки, который имеет небольшой градиент. CSS::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f3f0f0; border-radius: 5px; box-shadow: inset 0 0 6px rgba(23, 22, 22, 0.22); } ::-webkit-scrollbar-thumb { background: #a0c8d8; background: -moz-linear-gradient(left, #a4c3d0 0%, #28a3ca 50%, #b2d2de 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #accfde), color-stop(50%, #2caad2), color-stop(100%, #bce0ee)); background: -webkit-linear-gradient(left, #a3bfcc 0%, #29b8e5 50%, #b1d3e0 100%); background: -o-linear-gradient(left, #9ebecc 0%, #29b8e5 50%, #a0c5d4 100%); background: -ms-linear-gradient(left, #9dc1d0 0%, #29b8e5 50%, #aed2e0 100%); background: linear-gradient(to right, #a6c9d8 0%, #29b8e5 50%, #b2d2de 100%); border-radius: 5px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#b3dced’, endColorstr=’#bce0ee’, GradientType=1);

}

Индивидуальные элементыВам нужны полосы прокрутки только для отдельных элементов, что в некоторых ситуациях, когда это выглядело бы великолепно, это pre элементы, так же table-responsive класс или что-либо с горизонтальным или вертикальным переполнением. Вот пример использования pre элемента, здесь измените размер браузера, чтобы увидеть полосы прокрутки.pre::-webkit-scrollbar { height: 14px; width: 14px; -webkit-appearance: none; } pre::-webkit-scrollbar-thumb { background-color: rgba(47, 46, 46, 0.2); border: 3px solid #fbf6f6; border-radius: 8px;

}

Одна удивительная вещь в этой полосе прокрутки: они могут быть представлены в разных стилях для разных HTML-элементов на одной веб-странице. Сегодня мы увидим реализацию такой полосы прокрутки для браузеров, поддерживаемых Webkit.

Сначала мы рассмотрим основные свойства CSS прокрутки:

::-webkit-scrollbar ::-webkit-scrollbar-thumb ::-webkit-scrollbar-track ::-webkit-scrollbar-button ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-corner ::-webkit-resizer

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

Как поменять цвет полосы прокрутки на сайте wordpress

Здравствуйте !

Сегодня я расскажу вам как можно очень просто поменять цвет полосы прокрутки на вашем сайте. И это ещё не всё, так же вы узнаете как изменить цвет фона полосы прокрутки, ширину полосы, скорость прокрутки и т.

д. Для тех кто не знает что это такое, полоса прокрутки — это такой элемент на сайте, который находится на самом краю с правой стороны сайта. Когда вы двигаетесь по сайту, то полоса прокрутки так же двигается вместе с вами.

Scrollbar — полоса прокрутки.

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

Итак, менять дизайн полосы прокрутки мы будем с помощью плагина — Awesome Custom Scrollbar. Данный плагин вы сможете установить прямо из своей админ-панели wordpress, для этого перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.

После установки и активации плагина у вас в левом меню панели, во вкладке Настройки, появится вкладка — WP Chandra Custom Scrollbar. Перейдите по данной вкладке, чтобы попасть на страницу настроек плагина.

Итак, переходим к настройкам плагина, их немного и они простые. Настройки на английском языке, но специально для вас я перевёл их обозначения.

Настройки плагина.

— Show, чтобы активировать новый скроллбар у вас должно быть включено значение — Show.

— Scrollbar Width, укажите здесь ширину полосы прокрутки (курсора) в пикселях.

— Scrollbar Radius, укажите радиус границы в пикселях для курсора.

— Background Color, укажите цвет фона полосы прокрутки.

— Border Color, укажите цвет полосы прокрутки (курсора).

— Scroll Speed, здесь можно задать скорость прокрутки.

— Scrollbar Opacity, непрозрачность полосы прокрутки, с этим значением можно поэкспериментировать.

— Autohide, здесь можно включить или отключить автоскрытие полосы прокрутки, то есть если укажите — Enable — включить, то полоса прокрутки вообще исчезнет с вашего сайта.

Hide Cursor Delay, здесь можно установить задержку для полосы прокрутки в микросекундах.

В конце жмём на кнопку — Сохранить изменения.

На этом всё

Стилизация скролл-бара средствами JavaScript

Ильдар Сарибжанов | 09.01.2017

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

В web’е есть ряд вещей, которые не поддаются стилизации в классическом понимании, т.е. нельзя, используя только CSS, изменить их внешний вид. К таким элементам относятся многие теги формы: селекты, чекбоксы, радио-кнопки. Ранее я уже рассказывал, как стилизовать select.

Теперь поговорим, как сделать красивый скролл-бар. Откровенно говоря, я ненавижу такие задачи, которые решаются не очевидно или не стандартно, потому что от браузера к браузеру, или даже от версии к версии браузера или ОС, могут вести себя по разному. Хватит лирики, работаем.

Немного теории

Полная эмуляция на js мне не нравится, т.к. это сложно и если js падает, то возможность пролистывания блока пропадает совсем. Где-то давно я почерпнул следующую идею:

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

Важно

в разных браузерах, ширина полосы прокрутки разная. Теперь строим из div’ов визуальное представление скролл-бара и вешаем на него нужные обработчики.

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

Практика

Технически я представляю как это все делать, и когда-то даже писал полностью всю обработку сам, но в данном случае мне не хотелось изобретать велосипед. Поискав варианты эмуляции скролла, нашел библиотеку baron. Она меня устраивала более чем, за исключением того, что все обертки и блоки эмуляции нужно вставлять в html.

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

Исходя из этого душевного посыла было принято решение написать небольшую обертку, которая подготовит блоки и запустит эмуляцию скролла.

Собственно, код обертки такой:

Кроссбраузерная кастомизация системного скроллбара

Проблема размещения непрерывного контента произвольного объёма в экран, или окно, фиксированных размеров, существует несколько десятков лет. Примерно столько же существует и лучшее решение этой проблемы: элемент графического интерфейса — скроллбар.

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС-онлайн.

Механизм системного скролла реализуется на уровне базовых возможностей операционной системы, поэтому с уверенностью можно сказать, что он всегда лучше js-эмуляции: он производительнее, работает независимо от JavaScript и реализует все необходимые «фичи» системы для разного типа устройств.

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

Сейчас в 2ГИС Онлайн мы используем FleXcroll: он эмулирует механизм скролла и не подходит нам по ряду причин:

Не является кроссплатформенным решением (в частности, плохо работает на Mac)
Как и любой эмулятор в принципе, имеет проблемы с производительностью
Не имеет встроенного механизма фиксации заголовков.

Все эти факторы заставили нас задуматься над двумя вопросами:

существует ли нужное нам готовое решение, или необходимо создавать собственное?
возможно ли в принципе сохранить системный механизм скролла, но полностью заменить его дизайн?

Нами были сформированы основные требования к решению, которое должно менять визуальное представление скроллбара:

Системный механизм скролла должен быть сохранён: коррекции подвергается только его дизайн.
Общий размер всех зависимостей должен быть минимизирован. В идеальном случае их не должно быть вообще. Должен быть минимизирован размер и самого решения.
Должен присутствовать механизм фиксации заголовков контента при выходе их за поле зрения, либо простой интерфейс для добавления такого механизма (подробнее об этом пункте см. ниже).

Ограничения

На момент написания статьи, более или менее гибко кастомизировать скроллбар средствами CSS можно только в браузерах на движке webkit. Цвета скроллбара можно поменять в браузере Internet Explorer. В остальных браузерах поддержка кастомизации скроллбара через CSS полностью отсутствует. Отчасти это связано с жёсткой позицией w3c:

Существующие решения

Из того большого числа js-библиотек более половигы подменяют нативный механизм скролла.

Это значит, что для враппера свойство overflow выставляется в значение hidden, а вложенный контейнер с нужным нам контентом меняет свою абсолютную позицию при генерации событий, связанных со скроллом (например, mousewheel).

К таким решениям можно отнести: jScrollPane, Scrollbar Paper, jQuery Custom Scrollbar plugin, FleXcroll, Tiny Scrollbar и многие другие.

Дело в том, что интерфейс событий, генерируемых действиями пользователя, при помощи которых пользователь что-то скроллит, существенно отличается от браузера к браузеру: с точки зрения стандартов тут творится настоящий бардак. Более того, последовательность и логика «бросания» событий серьёзно отличается и между платформами.

Например, трекпады на платформе Mac при скролле генерируют события типа Wheel с большей частотой, чем колесо обычной мыши, что приводит к чересчур быстрому скроллу в ряде подобных решений.

Совет

Именно эти недостатки эмуляции скролла привели нас к формулированию первого пункта требований.

Многие решения изначально позиционируются как плагины к jQuery. В ситуации, когда мы используем jQuery по частям, возникает проблема экономии трафика. Проблема существенно растёт при наличии у плагина зависимости от куда более тяжеловесного jQuery UI.

Это касается, например, ShortScroll и Vertical Scroll. А также от ряда других библиотек: например, один из немногих jQuery плагинов, сохраняющих нативный механизм скролла, Scrollbars, зависит от 4 плагинов: event.

drag, resize, mousehold и mousewheel общим весом более 10 кб.

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

Собственное решение

У решения есть две основных задачи: 1) скрыть системный скроллбар и 2) отобразить кастомный скроллбар.

Для простоты будем рассматривать только вертикальный скроллбар — в нашем случае, как и в большинстве других, нужен только он. Кроме того, это экономит объём выходного кода. Для случая с горизонтальным скроллбаром рассуждения расширяются по аналогии.

Для начала, построим html структуру:

где container — собственно, то, что мы хотим скроллировать; scroller — блок, в который по высоте не помещается container, но у него выставлено свойство overflow-y: scroll, что приводит к появлению системного скроллбара у его правой границы; wrapper — окно с шириной чуть меньшей, чем у scroller и свойством overflow: hidden. Ширина меньше ровно на ширину скроллбара scroller.

К сожалению, средствами CSS невозможно точно узнать ширину системного скроллбара.

Например, не работает вариант с выставлением ширины 125% для scroller и 80% для container, при котором, казалось бы, ширины container и wrapper должны точно совпасть.

Можно сделать scroller заведомо шире, а wrapper и container выставить одинаковую ширину, но такой способ не подходит для резиновой вёрстки и порождает баг в webkit браузерах (см. ниже).

Введём js-переменные:

var wrapper = document.getElementById(‘wrapper’),
scroller = document.getElementById(‘scroller’),
container = document.getElementById(‘container’);

Теперь мы можем вычислить ширину системного скроллбара: scroller.offsetWidth — это ширина scroller, включающая в себя border, padding, а также системный скроллбар. Если мы обнулим border и padding при помощи CSS, и вычтем scroller.clientWidth, мы получим искомую ширину скроллбара в пикселях.

В webkit-браузерах существует особенность, заставляющая скроллиться элементы при выделении в них текста в горизонтальном направлении, даже при overflow-x: hidden.

Обратите внимание

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

К счастью, в webkit-браузерах, и только в них, мы можем обнулить ширину скроллбара средствами CSS, после чего ширины всех трёх блоков в точности совпадут и места для горизонтального скролла просто не будет:

.scroller::-webkit-scrollbar { width: 0;
}

Теперь нарисуем и спозиционируем кастомный скроллбар. Для этого минимально усложним html структуру на 1 элемент, который и будет полностью отвечать за визуальное представление скроллбара:

Здесь важно отметить, что для нашей задачи не требовалась прорисовка кнопок «вверх» и «вниз», а также подстилающего «трека». Впрочем, никаких ограничений для их реализации нет.

При реализации драга нарисованного кастомного скроллбара, главное — запретить выделение текста внутри скроллируемого контента. Для этого достаточно сделать вот такой бинд:

Как видите, большая часть кода нужна для браузера IE8, который пока, к сожалению, нельзя сбрасывать со счетов. Обратите внимание, что сброс «нажатого» состояния мыши должен происходить не только при отпускании кнопки мыши, но и при потере страницей фокуса (blur).

Прилипающие заголовки

Некоторые элементы внутри container всегда должны быть видны пользователю. Например, это могут быть заголовки разделов какой-то статьи, при клике на которые (это дополнительный функционал, который выходит за рамки решения) контент «перематывался» бы к кликнутому заголовку.

Ни абсолютное (относительно scroller), ни относительное (относительно своих начальных позиций) позиционирование заголовков в чистом виде, в данном случае не подходит.

Первое — по причине схлапывания контента, окружающего заголовок и соответствующих им рывков при скролле; второе — по причине нативных неустранимых transition’ов у браузера Internet Explorer для скролла, которые приводят к дрожанию всех зафиксированных заголовков.

В связи с этим, html структуру пришлось ещё немного усложнить, обернув все заголовки в врапперы, задача которых — сохранять место под заголовками при их вырывании из потока во время фиксации абсолютным позиционированием. В принципе, аналогичного результата можно добиться подбором отрицательных margin’ов для заголовков и секций, к которым они относятся — тогда можно обойтись и без врапперов заголовков.

При каждом скролле для каждого заголовка необходимо проверять условие:

scroller.scrollTop — H[i].offsetTop > Sum(H[j].offsetHeight, j=0..i-1)
scroller.scrollTop — H[i].offsetTop < scroller.clientHeight – Sum(H[j].offsetHeight, j=i..n-1)
[su_box title=”Важно” style=”glass” box_color=”#F63E62″ radius=”5″]

где H — массив элементов заголовков; i — номер заголовка, меняется в диапазоне от 0 до n-1; scroller.scrollTop — виртуальное расстояние от верхней границы container до верхней границы видимой части container; H[i].offsetTop — расстояние от верхней границы container до верхней границы заголовка H[i].

[/su_box]

Выполнение обоих условий означает, что заголовок i находится где-то в видимой области, не конфликтует с другими заголовками по положению, и его фиксация не требуется. Нарушение первого условия означает, что заголовок пытается скрыться сверху, а второго — снизу. В обоих случаях требуется фиксация.

Пробрасывание события mousewheel

В webkit браузерах мы столкнулись с неприятным багом: событие mousewheel не пробрасывалось с фиксированных заголовков вверх к scroller.

Это создавало эффект поломки (внезапного прекращения) скролла при попадании под курсор фиксированного заголовка (например, в результате всё того же скролла).

То есть, пользователь крутит колесо мыши, под курсор попадает заголовок, фиксируется, и, внезапно, скролл перестаёт работать (точнее, скроллиться начинает вся страница).

К счастью, в webkit браузерах (а нам требовалось обратиться только к ним) есть такая возможность:

$(headers).on(‘mousewheel’, function(e) { var evt = document.createEvent(‘WheelEvent’); evt.initWebKitWheelEvent(e.originalEvent.wheelDeltaX, e.originalEvent.wheelDeltaY); scroller.dispatchEvent(evt); // Пробрасываем событие на scroller e.preventDefault(); // Останавливаем скролл страницы
});

Конечно, это сокращённая версия кода: необходимо проверять наличие соответствующих функций и типа события, чтоб не генерировать ошибки в других браузерах.

Пример

Для минимизации объёма js-кода и зависимостей был использован подход, при котором библиотека не является плагином jQuery, хотя по-умолчанию использует его.

Например, в самом простом случае (без фиксации заголовков), инициализация выглядит так:

acBar($(‘.wrapper’), { scroller: ‘.scroller’, container: ‘.container’, bar: ‘.scroller__bar’
});

Причём $(‘.wrapper’) может быть массивом html объектов — проинициализируется каждый из них.

Совет

Если вы хотите фиксации заголовков, ограничения верхнего положения скроллбара, и использования альтернатив jQuery, инициализация немного усложняется:

baron($(‘.test_advanced’), { scroller: ‘.scroller’, container: ‘.container’, bar: ‘.scroller__bar’, barOnCls: ‘.scroller__bar_state_on’, // Класс, навешиваемый скроллбару, когда он должен быть видимым barTop: 40, // Ограничитель позиции скроллбара сверху header: ‘.header__title’, hFixCls: ‘header__title_state_fixed’, // Класс, навешиваемый зафиксированным заголовкам selector: qwery, // Селектор event: function(elem, event, func, off) { // Менеджер событий if (off) { bean.off(elem, event, func); } else { bean.on(elem, event, func); } }, dom: bonzo // Библиотека для работы с DOM
});

Для менеджера событий пришлось сделать обёртку, поскольку его интерфейс отличается в разных библиотеках. В принципе, можно обернуть нативные функции типа addEventListener и отказаться от специализированного менеджера событий.

Тестирование

В тестировании принимали участие актуальные версии браузеров Chrome, Firefox, Opera, Safari и Internet Explorer (IE) на платформах Windows, Mac и iOs (тестировались, конечно, только существующие версии браузеров :)). Кроме этого, тестировался IE9 и IE8. Все тесты на всех браузерах проходят нормально.

Особенность предлагаемого в данной статье решения заключается в том, что даже в случае каких-то ошибок в JavaScript, скролл всё равно будет работать, поскольку он системный, поэтому категорию риска попадают лишь браузеры устаревших версий Android и Opera Mini, в которых системный скролл на элементах не реализован, или реализован плохо.

Итог

Предложенное решение позволяет сохранить механизм системного скролла, заменить его дизайн, полностью отказаться от жестких зависимостей от других библиотек, и уложиться в 998 байт сжатого кода (минифицированного и сжатого gzip). В довесок к этому, есть механизм фиксации каких-либо элементов скроллируемого контента (например, заголовков).

К недостаткам можно отнести отсутствие горизонтального скроллбара и контролов управления вертикальным.

Код решения можно скачать с Github.
Демо.

Внедрение данного решения запланировано на начало марта.