title: scrollbar css not showing on iphone chrome and safari
body: <p>I've been searching all day to override this annoying iphone problem with scrollbars</p>
  <p>so I've this very simple example</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scroller {
    background: lightblue;
    height: 1000px;
    max-width: 400px;
    margin: 90px auto;
    padding: 40px;
  }
  .page {
    max-height: 90vh;
    overflow: scroll;
    background: navajowhite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="page"&gt;
      &lt;div class="scroller"&gt;
        lorem ipsum
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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.</p>
  <p><strong>short story</strong></p>
  <p>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.</p>
  <p>I also tried -webkit-overflow-scrolling: touch;</p>
  <p>also if you want to take a deep look into the original website you can find it in <a href="https://qarar-balady.vercel.app/draft-details/967" rel="nofollow noreferrer">here</a></p>
  <p>I am open to any ideas.. (simple I hope)</p>