Invis1ble, я посмторел ваш плагин. У элемента, который содежит список, вместо overflow: auto стоит hidden и обработка события прокрутки, что ломает все "нативные" жесты на всех устройствах.
Мышь. Невозможно воспользоваться ускоренной прокруткой, зажав колесо мыши.
Вместо плавной прокрутки при повороте колеса мыши на один щелчёк, сразу перескакивает на новую позицию, и скорость прокрутки не соответствует параметрам ПК. (Т. е. если установлено, что скорость 500пкс/щелчёк, то в этом месте прокрутка кажется замедлённой, "типа тормозит")
Клавиатура. Не работают стрелки, пробел, клавиши Home, End, PageUp, PageDown.
На мобильном устройстве слегка подпрыгивает при "прокрутке".
В Safari, Chrome и в их мобильных версиях, и в Opera есть нестандартные псевдо-элементы ::-webkit-scrollbar и ::-webkit-scrollbar-thumb, которые позволяют стилизовать элементы прокрутки.
http://caniuse.com/#search=scrollbar
<style>
#my-box {
overflow: auto;
width: 300px;
height: 300px;
}
/* дорожка*/
#my-box::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/* скроллбар целиком*/
#my-box::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/* бегунок*/
#my-box::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;
}
.content {
height: 2400px;
width: 600px;
background-color: #eee;
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee);
background-size: 200px 200px;
background-position: 0 0, 100px 100px;
}
</style>
<div id="my-box">
<div class="content"></div>
</div>
Стилизация не наносит вреда доступности содержимого и грандиозно деградирует в Мозилле и Эксплорере. (Кстати в IE8 ваш скрипт не работает)
Удобно использовать, когда встроенная полоса прокрутки, поскольку она ведёт себя привычным для пользователя способом.
Доступность + <div> вместо полосы прокрутки =