How to change the scroll in the block?

Question

for example, in the block I replaced the slider itself through a pseudo-class, but nothing has changed:

.filter__checkbox-list { height: 105px; overflow: scroll; overflow-x: hidden; &::-webkit-scrollbar-thumb { background: red; } }

it was necessary to do so, but will the css data properties work for the block?

for some reason it works exactly if you specify the width of the scroll itself, apparently it is necessary) as an answer, publish your comment))

soledar10 soledar10 22.4k five 21 51 · Accepted Answer · 2018-07-09T04:32:24

It is necessary to add another width of the scrolbar

 &::-webkit-scrollbar

Example

 .filter__checkbox-list { height: 105px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; max-width: 300px; } .filter__checkbox-list label { display: block; padding: 5px; } /* Width */ .filter__checkbox-list::-webkit-scrollbar { width: 6px; } /* Thumb */ .filter__checkbox-list::-webkit-scrollbar-thumb { background: red; }

 <div class="filter__checkbox-list"> <label><input type="checkbox"> List 1 </label> <label><input type="checkbox"> List 2 </label> <label><input type="checkbox"> List 3 </label> <label><input type="checkbox"> List 4 </label> <label><input type="checkbox"> List 5 </label> <label><input type="checkbox"> List 6 </label> <label><input type="checkbox"> List 7 </label> <label><input type="checkbox"> List 8 </label> </div>

Answer 2 · 2018-07-09T04:15:15

Without defining styles for :: - webkit-scrollbar will not work. Try this

 .filter__checkbox-list { height: 105px; overflow: scroll; overflow-x: hidden; } .filter__checkbox-list::-webkit-scrollbar { background-color: #ddd; border-radius: 8px; width: 7px; overflow: hidden; } .filter__checkbox-list::-webkit-scrollbar-thumb { background-color: #1955A8; border-radius: 8px; }

& :: - webkit-scrollbar-thumb (preprocessor used) = .filter__checkbox-list :: - webkit-scrollbar-thumb - these styles are equivalent.

How to change the scroll in the block?

2 answers 2

More articles: