CODEWITHSUNDEEP
htmlioscssbrowserscroll
Dennis Bauszus
Dennis Bauszus

Reputation: 1802

Prevent scroll pull beyond extent of the item on iOS

This might have been answered but I am really struggling to describe this issue.

On my website I have map div, a transparent slider div on top and non transparent info div below the transparent slider.

<div id="map"></div>
<div id="spacer"></div>
<div class="info"></div>

The css allows the info div to be slid over the map.

html {
    overflow: hidden;
    height: 100%;
}

body {
    overflow: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
}

#map {
    position: fixed;
    width: 100%;
    height: 90%;
}

#spacer {
    width: 100%;
    height: 90%;
}

.info {
    z-index: 999;
    position: absolute;
    background-color: white;
    width: 100%;
    min-height: 100px;
    box-shadow: 0px 0px 10px slategrey;
}

Here is a picture of the undesired effect.

enter image description here

It shouldn't be possible to pull the sliding div away from the bottom of the browser.

Is there a html & css solution?

Upvotes: 0

Views: 442

Answers (1)

Tanasos
Tanasos

Reputation: 4098

I think what you are looking at here is a browser drawback, which can be overriden in safari under ios by using a non-standard webkit rule called -webkit-overflow-scrolling , you can find information about it here on MDN. I have ran into this issue numerous times in the past, but I can't remember finding a fix for it.

You can try this simple "hack" to bypass it, but I don't think this is a good idea though:

body.lock-position {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

You can find more information about this issue here.

Upvotes: 2

Related Questions