There are lots of threads on difficulties with overflow scroll in iOS. I’ve tried just a few options however I’m utterly unable to scroll on the iOS (particularly iPhone) model of my web site when the content material is greater than would slot in the containing div.
Here’s a dwell instance that reveals the scrollbar within the desktop model of the web page on Safar, Firefox and Chrome, in addition to the responsive view of the web page as seen with the develop instruments of all these three browsers. However, I simply can’t get the content material to scroll on my iPhone (utilizing XS).
Right here is the CSS for the containing div
#leaflet-slidebar essential {
--main-height: calc(100vh - 28px);
flex: unset;
flex-flow: unset;
peak: unset;
padding: 0 10px;
peak: var(--main-height);
max-height: var(--main-height);
overflow-y: auto;
margin-top: 5px;
}
/* some nonsense to view scrollbars on the cell */
#leaflet-slidebar essential::-webkit-scrollbar {
width: 15px;
peak: 15px;
border-bottom: 1px stable #eee;
border-top: 1px stable #eee;
}
#leaflet-slidebar essential::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #C3C3C3;
border: 2px stable #eee;
}
#leaflet-slidebar essential::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}
Be aware that I’m not even enthused about viewing the scrollbar. If it reveals, nice, however no foul if it does not. I simply need the content material to be scrollable. I’ve tried one finger or two finger scroll, however nothing works. Would love any suggestion that may resolve this.
