enable overflow scrolling on iOS

There are many threads on difficulties with overflow scroll in iOS. I have tried a few suggestions but I am completely unable to scroll on the iOS (specifically iPhone) version of my website when the content is more than would fit in the containing div.

Here is a live example that shows the scrollbar in the desktop version of the page on Safar, Firefox and Chrome, as well as the responsive view of the page as viewed with the develop tools of all those three browsers. But, I just can’t get the content to scroll on my iPhone (using XS).

Here is the CSS for the containing div <main>

#leaflet-slidebar main {
    --main-height: calc(100vh - 28px);
    flex: unset;
    flex-flow: unset;
    height: unset;
    padding: 0 10px;
    height: var(--main-height);
    max-height: var(--main-height);
    overflow-y: auto;
    margin-top: 5px;
}
/* some nonsense to view scrollbars on the mobile */
#leaflet-slidebar main::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
#leaflet-slidebar main::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}
#leaflet-slidebar main::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
}

Note that I am not even enthused about viewing the scrollbar. If it shows, great, but no foul if it doesn’t. I just want the content to be scrollable. I’ve tried one finger or two finger scroll, but nothing works. Would love any suggestion that can solve this.

You need to sign in to view this answers

Related Post