Изменение цвета полосы прокрутки в Firefox - PullRequest
Новая
       15

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

23 голосов
/ 08 октября 2010

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

Ответы [ 7 ]

13 голосов
/ 08 октября 2010

Изменение цвета полосы прокрутки в 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>

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

7 голосов
/ 07 ноября 2011

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 голосов
/ 08 октября 2010

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

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

2 голосов
/ 08 октября 2010

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

РЕДАКТИРОВАТЬ: с небольшим количеством javascript, можно было бы построить вассвои «html-полосы прокрутки», которые можно стилизовать так, как вы хотите, - но я не думаю, что вы должны это делать, написав это просто для подробностей.

0 голосов
/ 01 февраля 2019

Начиная с версии 64 Firefox допускает ограниченное оформление полос прокрутки: 

.my-scrollable {
   scrollbar-color: red blue;
   scrollbar-width: thin;
}

См. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

0 голосов
/ 02 октября 2015

для Firefox или кросс-браузер вы можете использовать: jQuery пользовательский контент-скроллер

более простой и легкий в использовании

вот пример, который я реализую в magento и протестировал на Firefox, Opera, Chrome и Safari: http://i.stack.imgur.com/wnRCL.png

0 голосов
/ 29 августа 2014

Насколько я знаю, это не очень полезно, но стоит отметить, что атрибут, управляющий отображением полос прокрутки в 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.

...