1

I've been searching all day to override this annoying iphone problem with scrollbars

so I've this very simple example

.scroller {
  background: lightblue;
  height: 1000px;
  max-width: 400px;
  margin: 90px auto;
  padding: 40px;
}
.page {
  max-height: 90vh;
  overflow: scroll;
  background: navajowhite;
}
<div class="container">
  <div class="page">
    <div class="scroller">
      lorem ipsum
    </div>
  </div>
</div>

which just an html divs with overflow scroll this works very well on web and android chrome but for some reason on iPhone(chrome and safari) this scrollbar is not showing at all.

short story

I was missing with codepen for a while until my mind was blown when I saw the scrollbar is showing on the (html, css, js) snippets boxes on iPhone so I decided to investigate a little on this website and learn how they managed to get it to work on iPhone, I learned that it was a scrollbar actual element that simulate the movement of the actual scrollbar. I tried to make it work this way but I just gave up, that was a lot of work and it wasn't worth it.

I also tried -webkit-overflow-scrolling: touch;

also if you want to take a deep look into the original website you can find it in here

I am open to any ideas.. (simple I hope)

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Abdelhamied mostafa
  • 124
  • 1
  • 11
  • 2
    [See this](https://caniuse.com/?search=overflow%3A%20scroll%3B) – Rob Moll Aug 30 '21 at 17:42
  • The scrollbar is a browser feature not a feature of an individual website. As such it was neevr supposed to be changed in the first place. As you are aware, you can change it somehow. However the supports is pretty bad and as such there is nothing anyone can do about it. – tacoshy Aug 30 '21 at 17:50
  • I’m voting to close this question because there is nothing the community can do about poorly supported CSS properties. Coding a fully supported scrollbar from scratch that fullfills the OP's requirement would be to broad and outside of the scope of what SO stands for. – tacoshy Aug 30 '21 at 17:53
  • You can make use of custom scrollbars. There you can change the stylesheet, so that they are permanently visible even on mobile browsers. Take a look at [this tutorial](https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp). Those are supported by nearly [every browser](https://caniuse.com/?search=%3A%3A-webkit-scrollbar). – Christopher Aug 30 '21 at 17:59
  • The scrollbar can be styled for every other browser except webkit powered browsers. Safari is a compilation of bad ideas wrapped together as a browser. If the scrollbar is left as it is and you also have overflowing content with a dark background your iOS users will not be able to see the scrollbar on mobile devices. – overcaffeinated Jun 23 '23 at 14:52

1 Answers1

3

If supported, modifying the ::-webkit-scrollbar style rules, will display the scrollbar on most devices permanently and not hiding them, like mobile browser defaults do.

Except Firefox and Internet Explorer, every commonly used browser, supports it.

There are some properties you can modify.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

enter image description here

And a lot of pseudo-class selectors, which allow for more specific selection of the parts.

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Firefox supports CSS Scrollbars Module Level 1, but not the ::-webkit-options by now.

This might be helpful too:

Your example with minimalistic -webkit-scrollbar-style-rules: 

.scroller {
  background: lightblue;
  height: 1000px;
  max-width: 400px;
  margin: 90px auto;
  padding: 40px;
}
.page {
  max-height: 90vh;
  overflow: scroll;
  background: navajowhite;
}
/* minimal */
.page::-webkit-scrollbar {
    width: .5em; /* counts only for the vertical scrollbar */
    height: .5em; /* counts only for the horizontal scrollbar */
}
.page::-webkit-scrollbar-track {
  background: #ccc;
}
.page::-webkit-scrollbar-thumb {
  background: #888;
}
.page::-webkit-scrollbar-thumb:hover {
  background: #555;
}
<div class="container">
  <div class="page">
    <div class="scroller">
      lorem ipsum
    </div>
  </div>
</div>
Christopher
  • 3,124
  • 2
  • 12
  • 29