Динамический стиль прокрутки 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 на элементе НЕ ПРОСТО ДОБАВИТЬ ваш новый код, он УДАЛЯЕТ ТАКЖЕ, что было внутри элемент.
проблема решена.
Ответ 6
Для этого вы должны полностью заменить полосу прокрутки.
Это просто вопрос выбор в зависимости от того, какой из них дает вам самый простой API.