Always show scrollbar on Safari iOS 13

Question

I found some help to always show the scrollbar on iOS and it works up to iOS12. But When I try to use it on iOS 13 the scrollbar is invisible again.

I use the following CSS snippet:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 3px;
  -webkit-overflow-scrolling: auto
}

::-webkit-scrollbar:horizontal {
  height: 5px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  height: 3px;
  background: #41617D !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.div-with-scrollbar{
  max-width: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

.div-too-big{
  width: 600px;
}

<div class="div-with-scrollbar">
<div class="div-too-big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna eget arcu venenatis molestie in quis arcu. Donec porta purus eu odio pharetra, quis rutrum turpis posuere. Fusce vitae sagittis metus. Morbi vitae porttitor nisi. Integer sit amet porttitor turpis. Fusce vitae velit ac mi tristique rhoncus ut in erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut eros nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a sapien quis odio ornare volutpat eu eu orci. Nunc eget lectus magna. Cras non urna ex. </div>
</div>

As said it works on iOS12 but not on iOS13 anymore (tested on Browserstack). How can I get it to always show on iOS13?

I'd also be open to suggestions how to show the user that this part of the page is horizontally scrollable.

score 3 · Answer 1 · answered Dec 10 '19 at 22:35

This occurs every new update. At this point it is nearly impossible to force Safari to show the scrollbar. Only the end user can override this setting and its a system global but people are coming out with solutions all the time. It just takes some time.

Apple made the conscious decision to HIDE scrollbars in iOS at the system level until there's an interaction. Mac OS (including Safari) and Android quickly followed that decision.

The suggestion of finding a library to rebuild the scrollbars to show in Mobile Safari remains the best solution. That said, this will guide you constructing your own scrollbar.

You can use NiceScroll package to solve your problem.

Hope this helps :)

score 1 · Answer 2 · answered Dec 10 '19 at 10:42

I just change ::-webkit-scrollbar:horizontal to ::-webkit-scrollbar-track, try this i hope it'll help you out. Thanks

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  height: 3px;
}

::-webkit-scrollbar-track {
  height: 5px !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px !important;
  height: 3px;
  background: #41617D !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
}

.div-with-scrollbar{
  max-width: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: auto
}

.div-too-big{
  width: 600px;
}

<div class="div-with-scrollbar">
<div class="div-too-big">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna eget arcu venenatis molestie in quis arcu. Donec porta purus eu odio pharetra, quis rutrum turpis posuere. Fusce vitae sagittis metus. Morbi vitae porttitor nisi. Integer sit amet porttitor turpis. Fusce vitae velit ac mi tristique rhoncus ut in erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut eros nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed a sapien quis odio ornare volutpat eu eu orci. Nunc eget lectus magna. Cras non urna ex. </div>
</div>

score 0 · Answer 3 · answered Apr 15 '21 at 18:35

0

If you're building an Angular app, try using the ngx-scrollbar library: https://github.com/MurhafSousli/ngx-scrollbar

It's simple to set up and now the scrollbar always shows up even in iOS.

answered Apr 15 '21 at 18:35

Andrew

1,581
3
18
31

Always show scrollbar on Safari iOS 13

3 Answers3