25426eda4b68941c56085b69c380ca8a

Господа, уверен, многие знают, что есть такая возможность, изменить на чистом css полосу прокрутки... Пример ниже. Но это можно только в chrome и opera. Есть еще возможность для IE пример [тут](http://htmlbook.ru/css/scrollbar-track-color). А кто знает, как обстоят дела с Mozilla Firefox, есть ли такая возможность реализовать такое на чистом css?





```
::-webkit-scrollbar-button {
  width: 5px;
  height: 0px
}

::-webkit-scrollbar-track {
  background-color: #ecede;
}

::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #6dc0c8;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #56999f;
}

::-webkit-resizer {
  width: 8px;
  height: 0px;
}

::-webkit-scrollbar {
  width: 8px;
}
```


```
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
```





[Изменить полосу прокрутки на чистом css в Mozilla Firefox](/questions/722260/%d0%98%d0%b7%d0%bc%d0%b5%d0%bd%d0%b8%d1%82%d1%8c-%d0%bf%d0%be%d0%bb%d0%be%d1%81%d1%83-%d0%bf%d1%80%d0%be%d0%ba%d1%80%d1%83%d1%82%d0%ba%d0%b8-%d0%bd%d0%b0-%d1%87%d0%b8%d1%81%d1%82%d0%be%d0%bc-css-%d0%b2-mozilla-firefox)
========================================================================================================================================================================================================================================================================================================


stackoverflow.com
2021.39

Нашел такое решение
-------------------


У `FF` есть такие свойства


`scrollbar-color && scrollbar-width`


[Scrollbar color](https://developer.mozilla.org/ru/docs/Web/CSS/scrollbar-color)


[Scrollbar width](https://developer.mozilla.org/ru/docs/Web/CSS/scrollbar-width)


По сравнению с хромовским движком конечно же все скудно и скромно.


Но если отталкиваться от `FF`, можно реализовать скудные возможности `FF`, а потом подогнать дизайн полосы прокрутки для хромовских движков, так как там возможностей побольше...





```
div {
  padding: 15px;
}

::-webkit-scrollbar-track {
  background-color: brown;
}

 ::-webkit-scrollbar-thumb {
  background-color: orange;
}

 ::-webkit-scrollbar {
  width: 8px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 100vh;
  background-color: #272727;
  color: antiquewhite;
  scrollbar-width: thin;
  scrollbar-color: orange brown;
}
```


```
<div>

  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil nobis quaerat accusantium, error, quisquam sed vero optio natus, totam dolor quia repellat? Eveniet corrupti vitae velit illum asperiores repellat, perferendis numquam cum fugit, cumque ipsam,
  error tempora ullam laborum maiores repellendus a! Qui totam inventore voluptas, quaerat expedita provident in officiis odit ad reprehenderit ut illo quia esse ipsum cum dolorum, debitis distinctio? Reiciendis enim reprehenderit sapiente at odio alias.
  Harum dolores saepe, a accusantium, quidem adipisci corporis facilis provident quibusdam culpa error ratione deleniti ipsa repellat atque aperiam velit voluptatem itaque tenetur quis odit exercitationem neque! Dicta labore, cupiditate totam corrupti,
  repudiandae, officiis recusandae enim error quaerat maxime doloribus placeat quod deleniti veniam impedit optio ratione quas exercitationem veritatis consequatur? Voluptates labore totam quae obcaecati aliquam praesentium eveniet cupiditate suscipit
  nesciunt reiciendis minus quia nihil id perferendis, veniam itaque libero corrupti a quam fugiat eum officia magnam? Assumenda, alias laborum reprehenderit velit eaque, placeat repellendus cupiditate esse obcaecati dicta, fugiat quisquam ipsa voluptas
  debitis! Quia, et? Eaque id assumenda dolorem saepe expedita eos quisquam itaque autem voluptate, aperiam possimus, est nulla dolorum ullam dicta, facilis nam nemo iste repellendus pariatur debitis beatae blanditiis porro consequuntur? Ratione reiciendis
  modi impedit rerum doloremque, optio asperiores, praesentium labore natus maiores nemo quis quia itaque dignissimos ut perspiciatis corporis commodi dolor provident aperiam, voluptates possimus sit. Consequatur labore perspiciatis quae saepe quisquam
  reprehenderit nobis eligendi, corporis, necessitatibus aut, in pariatur? Debitis sed fugiat, ab dolorum eveniet, praesentium quas est sapiente distinctio libero voluptate reprehenderit facere, magni in. Voluptas, harum optio! Et aspernatur assumenda
  non reprehenderit porro inventore cupiditate doloremque veritatis, laborum repudiandae necessitatibus sequi labore accusamus provident nisi illo distinctio sapiente sit, nesciunt dolores officia quam doloribus fuga dolore! Quos, pariatur ipsa. Fugit
  quam soluta quidem voluptatibus accusantium commodi aliquid assumenda laboriosam, adipisci ullam iste ea eos veniam laborum minima pariatur iusto, natus itaque totam unde cumque doloribus. Esse soluta deleniti culpa minima sunt molestiae accusamus dolore
  labore doloremque delectus, ad explicabo dolorem eum? Iste maxime et at, debitis ab incidunt, magni pariatur libero fugiat voluptas magnam nesciunt, eaque ipsa culpa quis. Quidem dolor natus sint itaque alias sapiente impedit libero! Eligendi exercitationem,
  dolorem, soluta nam ab perferendis iure magnam neque quisquam earum iusto dolore, inventore tenetur hic tempora! Harum debitis fuga asperiores corporis esse sapiente iste atque! Deserunt quas quis nostrum ipsa incidunt blanditiis placeat labore facere
  facilis. Veritatis rem earum dolorem quibusdam dolores officiis cumque minus distinctio doloremque quidem, atque doloribus illum! Alias placeat voluptatibus odit praesentium dolores cum perspiciatis cumque animi necessitatibus natus tempora nesciunt,
  qui numquam vero ullam id magnam sapiente esse molestiae optio dolorum, nemo non. Officia qui, cum eveniet veritatis molestias dolor laborum omnis vel. Obcaecati quam corrupti sequi numquam tenetur eius adipisci et nihil accusamus natus quidem sint
  eum quo magni, dolorum ex, hic veniam! Iusto omnis accusamus sapiente saepe error, amet molestias explicabo. Eaque libero provident iusto sunt modi quibusdam dicta nostrum asperiores beatae sint nemo qui laborum cupiditate, tenetur debitis? Ex tenetur
  in, reprehenderit doloremque exercitationem non officia numquam assumenda quo quam culpa expedita optio! Nulla cupiditate saepe illum consequuntur vel animi fugiat non, suscipit dicta neque, eveniet temporibus. Perferendis accusantium soluta modi, blanditiis
  fuga enim. Repellat obcaecati sequi debitis dicta odio iusto architecto esse laboriosam nihil accusantium dolores nam ut ex numquam, vitae nemo facere eius nesciunt blanditiis maiores corrupti earum animi error natus. Quas mollitia blanditiis ea impedit
  autem dolore aliquam ipsum odio natus hic voluptate placeat neque obcaecati aspernatur, officia voluptas! Rem laborum, amet beatae ea, culpa dicta soluta laboriosam porro aliquid omnis ducimus, vitae fugit unde sit adipisci iusto molestiae necessitatibus
  dolorem atque cumque est distinctio! Culpa dignissimos consequuntur molestiae voluptates in illum quasi ducimus nisi eius sunt iusto incidunt voluptatem dolorum, commodi temporibus sequi placeat eos ipsa architecto ad officiis fuga odio! Laborum debitis,
  quibusdam mollitia quod nemo tempora expedita fugiat magnam totam! Impedit laborum sed corrupti ullam animi labore inventore aliquid, cupiditate deleniti autem harum suscipit, modi saepe quia asperiores atque iure! Illum eum quibusdam totam, voluptatum
  rerum at placeat soluta consequatur veniam magni, accusantium minima distinctio. Quos molestias at maiores consequuntur maxime laudantium, temporibus laborum dolorem aperiam modi minima ipsam earum, aliquid neque, placeat aspernatur. Expedita, iste
  minima? Est, voluptatibus, praesentium ut reprehenderit id amet ducimus, eius repellat reiciendis nihil eaque quos illum voluptate recusandae iste. Non, cum ullam enim quod laboriosam atque dolorum perspiciatis consequuntur quis eius nemo nam odio saepe
  qui obcaecati similique. Iure dolore enim, voluptatibus beatae veniam corrupti quaerat facilis culpa mollitia autem. Beatae repellendus, consectetur laborum nostrum sapiente, ex cumque dolorem nobis odio dolore architecto, aperiam ad ipsa excepturi
  voluptas eaque enim tenetur? Voluptatem, quos. Perspiciatis ad, repudiandae ipsam magnam ullam ut officiis repellendus distinctio porro, vero nam. Atque iste exercitationem blanditiis est labore praesentium alias voluptatem itaque modi deleniti, ratione
  nam recusandae minima vitae nulla! Sequi voluptas, est perferendis, quas nisi ipsa necessitatibus similique sapiente, at provident recusandae. Omnis illum inventore sapiente voluptatem repellendus vel quidem iusto incidunt facilis quo totam nostrum
  tempore voluptates, impedit similique ipsam, nesciunt dolor, possimus blanditiis quas reiciendis. Maiores provident assumenda animi placeat, possimus consequatur aut ut porro quibusdam. Magni molestiae nesciunt dolores, voluptate odio et! Facilis exercitationem
  pariatur nam harum dolorum architecto quidem dolores perferendis, iure quis a! Natus molestias odio explicabo quaerat quas perferendis, ipsum suscipit ratione vel minus ea nesciunt culpa possimus neque totam ab vitae similique reiciendis obcaecati reprehenderit
  numquam aspernatur optio eos consectetur? Nihil dolorum hic quia quod. Debitis, expedita natus similique quasi facilis pariatur excepturi ad distinctio accusamus. Recusandae dicta atque necessitatibus adipisci fugit natus perferendis labore aliquam,
  impedit magni voluptates quos id sed commodi sapiente saepe molestias beatae ducimus asperiores repudiandae autem ipsa excepturi nihil. Quaerat ipsum fugiat mollitia perferendis hic excepturi, eveniet, sapiente aperiam, incidunt quo magnam ea repellendus
  molestias quia est vitae iste beatae! Perspiciatis non sed, odit commodi dolorem doloremque quis ad necessitatibus veritatis voluptatem, aperiam maxime praesentium voluptatum accusamus placeat? Quam et corporis excepturi fugiat impedit provident. Veritatis
  voluptatem aut ipsum, beatae rerum, quis necessitatibus, molestiae illo deleniti aliquid quod tempore soluta! Nesciunt sequi pariatur assumenda quibusdam maxime, et porro tempora voluptates consectetur eius suscipit quis officia delectus ipsum explicabo
  perspiciatis similique repudiandae quos temporibus, totam, veritatis voluptatibus nostrum facilis. Doloremque officia magni quis ad accusantium eos repellat architecto autem nam optio officiis quaerat hic deserunt eius quae consectetur maiores, vero
  sint reprehenderit eveniet non? Officiis debitis, numquam at nobis dicta aliquam quisquam quia totam natus vero inventore laudantium cumque eveniet alias expedita mollitia. Omnis non vero nobis dolorem! Fugiat assumenda dicta blanditiis doloribus accusantium
  cum illum numquam adipisci, modi est incidunt. Velit, voluptatibus assumenda ea ratione qui unde debitis adipisci consequatur aut excepturi exercitationem facere quis quam distinctio dolorem voluptatem temporibus accusantium in. Id, asperiores amet.
  Ex ipsam doloribus odit aperiam, quia aliquid quasi, eos asperiores vel officiis, dignissimos dolorem odio ratione cum velit neque distinctio deleniti at molestiae aut! Magnam earum assumenda corrupti
</div>
```






Немного поменять скроллбар на чистом CSS в Firefox всё-таки можно.
Работают свойства **scrollbar-color**; и **scrollbar-width**;
Подробнее можно почитать [тут](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color)
А для более глубокой кастомизации всё же лучше использовать JS, как советовали выше.







```
::-webkit-scrollbar-button {
  width: 5px;
  height: 0px
}
::-moz-scrollbar-button {
  width: 5px;
  height: 0px
}

::-webkit-scrollbar-track {
  background-color: #ecede;
}
::-moz-scrollbar-track {
  background-color: #ecede;
}

::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #6dc0c8;
}
::-moz-scrollbar-thumb {
  border-radius: 0px;
  background-color: #6dc0c8;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #56999f;
}
::-moz-scrollbar-thumb:hover {
  background-color: #56999f;
}

::-webkit-resizer {
  width: 8px;
  height: 0px;
}
::-moz-resizer {
  width: 8px;
  height: 0px;
}

::-webkit-scrollbar {
  width: 8px;
}
::-moz-scrollbar {
  width: 8px;
}
```


```
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
<p>Hello</p><br/>
```




