时间戳

首页 > 解决方案 > 可滚动 div 内的叠加层未正确显示

html - 可滚动 div 内的叠加层未正确显示

问题描述

我有一个可滚动的 div。在这个 div 中，我有一个绝对定位的叠加层。可悲的是，这个叠加层卡在顶部。所以当我向下滚动时，叠加层保持在顶部：

.list {
  height: 300px;
  width: 300px;
  overflow: scroll;
  overflow-x: hidden;
  font-size: 12px;
  position: relative;
  border: 2px solid;
}

span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 12px;
  height: 33px;
  background: red;
}

span:nth-child(2n) {
  background: blue;
}

.overlay {
  z-index: 1000;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(255, 255, 255);
  opacity: 0.8;
  cursor: default;
  position: absolute;
}
<div class="list">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <div class="overlay"></div>
</div>

当用户按下按钮时，叠加层可见。当他不向下滚动时，一切看起来都很好，但当他这样做时，不要。那么知道如何在整个可滚动的 div 元素上扩展叠加层吗？

标签： htmlcss

解决方案

不是最优雅的，但你可以使用position:sticky 

.list {
  height: 300px;
  width: 300px;
  overflow: scroll;
  overflow-x: hidden;
  font-size: 12px;
  position: relative;
  border: 2px solid;
}

span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 12px;
  height: 33px;
  background: red;
}

span:nth-child(2n) {
  background: blue;
}

.overlay {
  z-index: 1000;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(255, 255, 255);
  opacity: 0.8;
  cursor: default;
  position: sticky;
}

.content {
  margin-top: -100%
}
<div class="list">
  <div class="overlay"></div>
  <div class="content">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

推荐阅读