Question

我对包含固定元素的可滚动div有问题。在iOS上，该固定元素无法很好地显示。这是一个html示例：

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

这是一个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;
}

但是在ios 12上，固定元素无法覆盖父对象是不起作用的，我该如何解决这个建议？

Answer 1

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

对此进行尝试，适用于chrome和Safari的解决方法

可滚动div中的固定元素

1 个答案: