Динамическая стилизация полосы прокрутки Webkit - PullRequest
Новая
       33

Динамическая стилизация полосы прокрутки Webkit

16 голосов
/ 02 марта 2011

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

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

Ответы [ 7 ]

5 голосов
/ 25 марта 2013

Для этой проблемы есть хороший обходной путь: вы можете добавить несколько классов 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 голосов
/ 06 марта 2018

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

body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png"); 
}

/ 

body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png"); 
}

HTML 

<body id="body" class="greenbody" bgcolor="#202020">

JavaScript для каждой кнопки вкладки (здесь показан только раздел полосы прокрутки) 

document.getElementById("body").className="greenody";
.........other function().... 
document.getElementById("body").className="bluebody";

ScreenShot1 GreenScrollBar Image ScreenShot2 Изображение BlueScrollBar

2 голосов
/ 13 августа 2012

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

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

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

1 голос
/ 14 августа 2012

Вы можете стилизовать полосы прокрутки с помощью 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

1 голос
/ 14 июля 2012

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

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

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

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

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

0 голосов
/ 26 июля 2015

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

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

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

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

0 голосов
/ 14 июля 2012

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

Это просто вопрос выбора того, что дает вам самый простой API .

...