Пользовательская полоса прокрутки

Question

Я надеюсь включить пользовательские полосы прокрутки на моем сайте, так как есть div с заданной высотой, которые будут переполнены. Мне удалось получить именно то, что я хочу, используя стилизацию webkit в css, но я знаю, что при просмотре сайта в Firefox или IE будут проблемы.

В результате я попытался включить библиотеку jScrollPane в свой сайт, но это вызвало всевозможные js "столкновения", которые приводят весь сайт в беспорядок!

Существуют ли какие-либо более простые способы настройки полосы прокрутки для обеспечения кросс-браузерной совместимости без добавления новой страницы js на сайт?

В качестве альтернативы - есть ли способ, которым я могу прикрепить что-то к CSS, когда браузер Firefox!?

Спасибо JD

Answer 1

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

Answer 2

Только что нашел это, без jQuery, если кому-то интересно:

http://www.script -tutorials.com / custom-scrollbars-cross-browser-solution /

Answer 3

Вот несколько пользовательских полос прокрутки, которые вы можете использовать: http://www.net -kit.com / jquery-custom-scrollbar-plugins /

Одно из этих решений должно работать.Кстати, я использую JScrollpane, и это работает как шарм для меня

Answer 4

Я рассмотрел все вышеизложенные предложения и был разочарован одной из следующих проблем:

1. плохая кросс-браузерная совместимость
2. лаг
3. много избыточного кода / зависимостей (jQuery UI)

Поэтому я использовал некоторые хитрости CSS и JavaScript (зависит от селекторов jQuery) для создания собственной реализации полосы прокрутки. Демонстрация доступна на https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. Исходный код размещен на https://github.com/anuary/jquery-custom-scrollbar.

Мой подход основан на собственной полосе прокрутки браузера. Однако эта реализация не поддерживает горизонтальные полосы прокрутки.

Answer 5

Я немного запутался в том, что именно вы просите, но если вы ищете какую-то полосу прокрутки, которую можно настроить с помощью CSS, посмотрите не дальше, чем Ползунок jQuery UI .

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