jQuery-плагин для стилизации прокрутки
Приветствую!
Написал давненько уже jQuery-плагин для стилизации скроллбара, но на днях сильно отрефакторил (скорее переписал с нуля). Интересует ваше мнение как пользователей и как программистов. Что добавить, может что-то изменить/улучшить. В планах на будущее:
|
Invis1ble,
jquery.mousewheel может убрать этот плагин? |
рони,
Мой плагин расчитан на поддержку старых браузеров, в самой первой версии я занимался нормализацией событий прокрутки колесом мыши сам. Но потом решил отказаться от этой затеи, так как есть хорошо развитый jquery.mousewheel, учитывающий множество нюансов. |
класс, в закладочки добавлю, пригодится
|
Ну что, критики не будет никакой? Или лень смотреть?
Печальбеда. |
Invis1ble,
есть же куча подобных плагинов с поддержкой всего и вся ... http://areaaperta.com/nicescroll/index.html http://jscrollpane.kelvinluck.com/index.html |
рони,
Подобных, да не подобных :) Где-то чего-то не хватает, где-то наоборот слишком много всего понапихали и т.п. Имхо, конечно. |
Как раз недавно делал работенку, там был небольшие элементы, хотелось сделать красиво, обычный скролл все портил, вспомнил, поставил и ничего не вышло хорошего, потом нашел еще кучу таких плагинов и со всеми какие то косяки выходили, не знаю почему, может jquery не той версии, с некоторыми были баги в консоли js, некоторые меняли свойства элемента...
сделал сам так, сунул элемент в div, которому поставил ширину на 20px меньше и overflow hidden, вертикальный скролл скрылся, но работал, сбоку нарисовал блок симпатичный, высоту ему высчитывал скриптик в зависимости от scrollHeight элемента, на событие onscroll написал скриптик, который двигал этот симпатичный блок, и даже написал небольшой скрипт (mouseup, mousemove), чтобы ухватившись за симпатичный блок менять правильно scrolltop элемента, ну а измененный scrolltop двигал симпатичный блок, получилось в обратную, все пашет, проверял везде, даже на мобилах, я доволен |
Цитата:
|
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> вместо полосы прокрутки = |
| Часовой пояс GMT +3, время: 14:17. |