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

?> Обзор: box-shadow, ::-webkit-scrollbar

<script v-pre type="text/x-template" id="scrollbar"> <style> main{ width: 100%; padding: 39px 0; display: flex; align-items: center; justify-content: center; } .scrollbar-main { width: 60%; height: 299px; overflow: auto; } .scrollbar-main .row { display: inline-block; padding: 12px; background: rgba(180,160,120,.1); text-align: center; white-space: nowrap; } .scrollbar-main::-webkit-scrollbar { width: 8px; background: white; } .scrollbar-main::-webkit-scrollbar-corner, /* Угол полосы прокрутки */ .scrollbar-main::-webkit-scrollbar-thumb, .scrollbar-main::-webkit-scrollbar-track { border-radius: 5px; } .scrollbar-main::-webkit-scrollbar-corner, .scrollbar-main::-webkit-scrollbar-track { /* Трэк полосы прокрутки */ background-color: rgba(180,160,120,.1); box-shadow: inset 0 0 1px rgba(180,160,120,.5); } .scrollbar-main::-webkit-scrollbar-thumb { /* Кнопка полосы прокрутки */ background-color: rgb(180,160,120); } </style> <script> module.exports = { computed: { rows: function () { return Array.from({length: 56}).map((v, i) => Array(99).fill(i + 11).join(' ')); } } } </script> </script>

!> Очень низкая совместимость, многие стили не контролируются. В производственной среде рекомендуется использовать аналогичные решения, такие как perfect-scrollbar.

Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-scrollbar&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>