Пользовательская CSS полоса прокрутки для Firefox

Я хочу настроить полосу прокрутки с помощью CSS.



Я использую этот код webkit CSS, который хорошо работает для Safari и Chrome:



::-webkit-scrollbar {

    width: 15px;

    height: 15px;

}



::-webkit-scrollbar-track-piece  {

    background-color: #C2D2E4;

}



::-webkit-scrollbar-thumb:vertical {

    height: 30px;

    background-color: #0A4C95;

}


Как я могу сделать то же самое в Firefox?



Я знаю, что могу легко сделать это с помощью jQuery, но я бы предпочел сделать это с помощью чистого CSS, если это выполнимо.



был бы благодарен за чей-то экспертный совет!

970   6  

6 ответов:

там нет Firefox эквивалент ::-webkit-scrollbar и друзей.

вам придется придерживаться JavaScript.

многие люди хотели бы эту функцию, см.:https://bugzilla.mozilla.org/show_bug.cgi?id=77790

этот отчет прошу точно то же самое, что вы просите:https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Он был закрыт как дубликат первого отчета, который я связал к.

что касается замены JavaScript, вы можете попробовать:

177  
2017-07-04 14:08:57

могу ли я предложить альтернативу?

никаких сценариев вообще, только стандартизированные стили css и немного творчества. Короткий ответ-маскировка частей существующей полосы прокрутки браузера, что означает, что вы сохраняете всю ее функциональность.

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

для демонстрации и немного более глубокого объяснения, проверьте здесь...

jsfiddle.net/aj7bxtjz/1/

37  
2017-07-05 17:14:55

Я думал, что поделюсь своими выводами, если кто-то рассматривает плагин JQuery для выполнения этой работы.

Я JQuery Custom Scrollbar идти. Это довольно причудливо и делает некоторую плавную прокрутку (с инерцией прокрутки) и имеет множество параметров, которые вы можете настроить, но это оказалось слишком интенсивным для меня (и это добавляет изрядное количество DOM).

теперь я даю Идеальная Полоса Прокрутки идти. Он прост и облегченн (6KB) и пока что он делает достойную работу. Это не интенсивный процессор вообще (насколько я могу судить) и добавляет очень мало к вашему DOM. У него есть только несколько параметров для настройки (wheelSpeed и wheelPropagation), но это все, что мне нужно, и он хорошо обрабатывает обновления содержимого прокрутки (например, загрузка изображений).

P. S. я мельком взглянул на jscrollpane не, но @Симоне, это немного устаревший сейчас и в лаваше.

35  
2017-10-30 08:21:59

2018 Firefox scrollbars по-прежнему выглядит так же плохо, как 1992, это Пита, но теперь мы можем использовать css фильтры на них.

вот пример с зеленоватым кросс-браузерным совместимым оттенком hommous сверху.

использовать мудро.

div {
  max-height: 200px;
  max-width: 80%;
  overflow-x: hidden;
  overflow-y: scroll;

  filter: sepia(100%) saturate(360%) grayscale(0) contrast(140%) hue-rotate(56deg) invert(16%)

}
<div>

<ul>
<li><a href="/wiki/Chapati" title="Chapati">Chapati</a>, unleavened flatbread from the <a href="/wiki/Indian_subcontinent" title="Indian subcontinent">Indian subcontinent</a></li>
<li><a href="/wiki/Wheat_tortilla" title="Wheat tortilla">Flour tortilla</a>, a thin unleavened flatbread from <a href="/wiki/Mexico" title="Mexico">Mexico</a></li>
<li><a href="/wiki/Focaccia" title="Focaccia">Focaccia</a>, a flat oven-baked bread from <a href="/wiki/Italy" title="Italy">Italy</a></li>
<li><a href="/wiki/Injera" title="Injera">Injera</a>, a sourdough-risen flatbread from <a href="/wiki/East_Africa" title="East Africa">East Africa</a></li>
<li><a href="/wiki/Khachapuri" title="Khachapuri">Khachapuri</a>, a breaded cheese dish from <a href="/wiki/Georgia_(country)" title="Georgia (country)">Georgia</a></li>
<li><a href="/wiki/Khubz" title="Khubz">Khubz</a>, a round bread from the <a href="/wiki/Arabian_Peninsula" title="Arabian Peninsula">Arabian Peninsula</a></li>
<li><a href="/wiki/Matnakash" title="Matnakash">Matnakash</a>, a leavened bread from <a href="/wiki/Armenia" title="Armenia">Armenia</a> (related to the <a href="/wiki/Ramadan_pita" class="mw-redirect" title="Ramadan pita">Ramadan pita</a>)</li>
<li><a href="/wiki/Naan" title="Naan">Naan</a>, a leavened, oven-baked flatbread from <a href="/wiki/Central_Asian_cuisine" class="mw-redirect" title="Central Asian cuisine">Central</a> and <a href="/wiki/South_Asian_cuisine" title="South Asian cuisine">South Asia</a></li>
<li><a href="/wiki/Pit%C4%83_de_Pecica" title="Pită de Pecica">Pită de Pecica</a>, a round bread from <a href="/wiki/Romania" title="Romania">Romania</a></li>
<li><a href="/wiki/Rghaif" class="mw-redirect" title="Rghaif">Rghaif</a>, a pancake-like bread from <a href="/wiki/Maghreb" title="Maghreb">Northwest Africa</a></li>
</ul>

</div>
2  
2018-05-22 22:09:12 
@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}
1  
2016-01-29 11:48:06

Он работает в пользовательском стиле, и это, кажется, не работает на веб-страницах. Я не нашел официального направления от Mozilla по этой. Хотя он, возможно, работал в какой-то момент, Firefox не имеет официальной поддержки для этого. Эта ошибка все еще открыта https://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

проверить http://codemug.com/html/custom-scrollbars-using-css/ Подробнее.

0  
2014-05-29 23:41:37

Comments

    Ничего не найдено.
Click here to cancel reply.