0

When I set overflow: scroll to a div, I'm expecting to have a scrollbar even when the content doesn't scroll (for design purposes)

but when there's no need to scroll, chrome mobile hides the scrollbar anyway.

.div-scroll{
  background-color: red;
  height: 300px;
  overflow-y: scroll;
}
.div-inner {
  background-color: blue;
  height: 200px;
}
<div class="div-scroll">
  <div class="div-inner">
  </div>
</div>

I'd like to show a disabled scroll on Chrome Mobile when the content doesn't scroll, or at least a way to know from pure CSS that it doesn't scroll, to avoid using width: calc(100% - 17px);

Fiddle

Luuuud
  • 4,206
  • 2
  • 25
  • 34
Lucas
  • 534
  • 1
  • 10
  • 29

1 Answers1

3

On webkit browsers to have a permanent scrollbar you can use the use the ::webkit-scrollbar ::webkit-scrollbar-thumb properties and customize them.

Refer following code:

.filter-list {
  width: 75px;
  height: 100px;
  overflow: auto;
}

.filter-list::-webkit-scrollbar,
.filter-list::-webkit-scrollbar,
.filter-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 15px;
}

.filter-list::-webkit-scrollbar-thumb,
.filter-list::-webkit-scrollbar-thumb,
.filter-list::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: lightgray;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
<div class="filter-list">
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
  <div> Hello </div>
  <div> World </div>
</div>
nashcheez
  • 5,067
  • 1
  • 27
  • 53
  • I don't want to remake the whole scrollbar, I just want to force the width to 17px, but when I use `.div-scroll::-webkit-scrollbar { width: 17px; }`, it deletes the scroll. – Lucas Feb 21 '17 at 13:28
  • Might be because the width is not sufficient. Check edited answer where I have modified width of scrollbar. – nashcheez Feb 21 '17 at 13:30
  • How can I keep browser defaults and just change the width? – Lucas Feb 21 '17 at 13:31
  • You cannot customize the inbuilt browser's scrollbar. What webkit browsers provide you with is to play around with your own css with the `-webkit-scrollbar`. – nashcheez Feb 21 '17 at 13:33