Динамический стиль прокрутки Webkit

В настоящее время я стилю прокрутки, используя свойства Webkit:: - webkit-scrollbar CSS, и хотел бы изменить эти свойства в событии mousemove. Проблема в том, что я не могу найти способ получить динамический CSS-прокрутка.

Можно ли динамически прокручивать панель прокрутки webkit через javascript (возможно, используя jQuery)?

ОТВЕТЫ

Ответ 1

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

Пример:

.red::-webkit-scrollbar  { ... }
.blue::-webkit-scrollbar { ... }

Кнопка, которая переключает между классами red и blue:

$("#changecss").on("click", function(){
    $(".red,.blue").toggleClass("red").toggleClass("blue");
});

Вот рабочая скрипка: http://jsfiddle.net/promatik/wZwJz/18/

Ответ 2

Если вы хотите изменить свойства прокрутки, когда мышь над ним. Вы можете сделать это с помощью CSS, вот пример http://jsfiddle.net/olgis/7Lg2R/ (извините за уродливый набор цветов).

Если вы хотите изменить цвет полосы прокрутки, если мышь находится над контейнером, тогда посмотрите на это сообщение панель прокрутки стиля webkit в определенном состоянии. Описаны несколько способов сделать это с использованием JavaScript и без него.

Замечание: я не знаю, по какой причине ни один из этих примеров (с CSS ни JavaScript) НЕ работают в моем Firefox 11 для Mint, но все они отлично работают в Chrome 18.0.1025.151.

Ответ 3

Да, вы можете это сделать.

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

Вы можете сделать это этот плагин

Если вам не нужно использовать jQuery - вы можете сделать это с помощью чистого Javascript: ссылка 1 ссылка 2. Но есть проблемы с несколькими браузерами.

Также см. Установка правил псевдокласса CSS из JavaScript

Ответ 4

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

        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-button:start:decrement,
        ::-webkit-scrollbar-button:end:increment  {
            display: none;
        }

        ::-webkit-scrollbar-track-piece  {
            background-color: #3b3b3b;
            -webkit-border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb:vertical {
            -webkit-border-radius: 6px;
            background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
        }

Демо: http://geryit.com/lib/custom-css3-scrollbars

Скачать Источник: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

Ответ 5

вы можете сделать тег <style> с id="scrollbar_style", а затем добавить css внутри него динамически следующим образом:

document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';

просто помните, что с помощью innerHTML на элементе НЕ ПРОСТО ДОБАВИТЬ ваш новый код, он УДАЛЯЕТ ТАКЖЕ, что было внутри элемент.

проблема решена.