After spending the entire day searching for a solution to override the irritating scrollbar issue on my iPhone, I came across this 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>Despite working perfectly on web and Android Chrome, the overflow scroll functionality mysteriously does not appear on iPhone browsers like Chrome or Safari.
In a nutshell:
While tinkering with Codepen, I observed that scrollbars appeared in HTML, CSS, JS snippet boxes on my iPhone. Intrigued, I delved into how this website achieved this feat, discovering it to be a simulated scrollbar element. Though I attempted to implement this technique, the effort proved too labor-intensive and ultimately futile.
I also experimented with using -webkit-overflow-scrolling: touch;
For a closer look at the original website, visit here
Any simple ideas are welcome!