CODEWITHSUNDEEP
htmlcss
batgerel.e
batgerel.e

Reputation: 857

Fixed element inside scrollable div

I have a problem with scrollable div which contains fixed element. On ios that fixed element not showing well. Here is a example html:

<div class="scrollable">
  <div class="item">
     <div class="content full">
       Some items rendered dynamically
     </div>
  </div>
</div>

Here is a css:

.scrollable {
 position: absolute;
 top: 130px;
 right: 0;
 bottom: 0;
 left: 0;
 display: flex;
 padding: 15px!important;
 flex-wrap: wrap;
 justify-content: flex-start;
 overflow-y: scroll;   
}

.content.full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

But on ios 12 its not working that fixed element can't overlay parent how should i fix this any advice ?

Upvotes: 2

Views: 1248

Answers (1)

Yang Daniel
Yang Daniel

Reputation: 135

.content.full {
    position: sticky;
    position: -webkit-sticky; /*For Safari */
    top: 0;
}

Have a try for this, workaround for chrome and Safari

Upvotes: 1

Related Questions