Изменение цвета полосы прокрутки в Firefox

Я хочу изменить цвет полосы прокрутки в Firefox. Как я могу это сделать?

Ответы

Ответ 1

Изменение цвета полосы прокрутки в Firefox не так тривиально, как в Internet Explorer и Opera. Firefox только позволяет настроить стиль полосы прокрутки по теме. Это хорошая вещь. Многим пользователям не нравится, когда внешний вид интерфейсных виджета случайным образом изменяется по прихоти дизайнера. Изменение внешнего вида элементов интерфейса может быть еще более проблематичным для людей с ослабленным зрением, которые могут использовать тему с высоким контрастом.

Тем не менее, если полоса прокрутки содержится в <div> на вашей странице, вы можете создать пользовательскую полосу прокрутки и сделать ее функциональной с помощью JavaScript. Этот плагин jQuery выглядит так, как будто бы это довольно удобно: http://jscrollpane.kelvinluck.com/

Я думаю, что это более или менее то, что вы хотите сделать: http://martinsmucker.com/demo/scroller.html

Вот как это работает:

Внутри документа <head> мы должны ссылаться на несколько таблиц стилей и скриптов (которые вы, вероятно, уже загрузили из http://jscrollpane.kelvinluck.com/.

Здесь происходит огромное количество магии:

<!-- Styles -->
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />
<style type="text/css">
    html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }
    #container {
        height:100%;
        width:100%;
        margin: 0;
        padding:0;
        overflow: auto;
    }
</style>

<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.scroll-pane').jScrollPane();
    });
</script>

Это предполагает, что файлы css и js находятся в том же каталоге, что и ваш html файл. Начнем с ссылки на предоставленную таблицу стилей.

Затем добавьте немного CSS, чтобы предотвратить отображение обычных полос прокрутки. Установите для margin и padding html и body значение 0 и установите height на 100%. Весь наш контент будет завернут в div с идентификатором "container". Этот контейнер точно заполняет страницу (высота: 100%, ширина: 100%;), и она крадет прокрутку, чтобы мы могли настраивать полосу прокрутки (overflow: auto;).

Затем мы ссылаемся на все соответствующие сценарии. Здесь я использую копию jQuery, размещенную Google, и снова я предполагаю, что все локальные скрипты находятся в том же каталоге, что и файл html. Последний бит jquery находит все div с классом "scroll-pane" и добавляет к ним соответствующие элементы и выполняет прокрутку.

Теперь html очень прост.

<body>
    <div class="scroll-pane" id="container">
    All of your content for the page goes here.
    </div>
</body>

Если вы все сделали правильно, ваша страница должна выглядеть как мой пример.

Ответ 2

Chrome и Safari поддерживают окраску полос прокрутки. Поместите следующий код в свой css и увидите, как происходит волшебство:

::-webkit-scrollbar {
  height: 12px;
  width: 12px;
  background: #969696;
  -webkit-border-radius: 1ex;
}

::-webkit-scrollbar-thumb {
  background: #2B2B2B;
  -webkit-border-radius: 1ex;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
  background: #1A1A1A;
}

Единственное, чего не хватает, это поддержка firefox для этой функции.

Ответ 3

Это невозможно напрямую с помощью CSS.

Но если вы можете использовать jQuery, jscrollpane может вам помочь.

Ответ 4

вы не можете. как вы можете видеть здесь, это возможно только для fpr IE5 + и Opera7.2 +.

EDIT: с небольшим количеством javascript, возможно, вы сможете создать собственные "html-scrollbars", которые можно было бы создать так, как вы хотите, но я не думаю, что вы должны это сделать, написав это только для подробного описания.

Ответ 5

Это не очень полезно, насколько я знаю, но стоит отметить, что атрибут, который контролирует отображение полосы прокрутки в Firefox, это: (ссылка ссылка)

Attribute....scrollbars
Type.........nsIDOMBarProp
Description..The object that controls whether or not scrollbars 
             are shown in the window. This attribute is "replaceable" 
             in JavaScript. Read only

В Firefox также есть следующие специфические для вендора свойства:

переполнение: -moz-scrollbars-none

другие допустимые значения: -moz-scrollbars-horizontal и -moz-scrollbars-vertical.