Question

我想在可滚动搜索列表上显示半透明的覆盖图（在加载过程中，更改页面后）。但是我无法将叠加层扩展为完整的父级内容。我无法设置固定的高度，因为父级的大小可能取决于结果数。

我正在尝试将position: absolute设置为覆盖。我也在尝试position: sticky。最后一个效果很好，但是它需要预先计算的高度，滚动之前需要占用空间。

https://jsfiddle.net/yr9xp8cs/。按照我目前的方法，覆盖（::before）仅具有可见部分的高度。

我想在可滚动容器的整个内容上设置叠加层，或者设置在滚动之前不占用任何空间的粘性叠加层。我不想使用JavaScript。

Answer 1

这就是我要做的。为建议列表创建包装器并使用覆盖。

.search-results-wrapper具有位置样式，而.overlay具有pointer-events: none可以滚动其下方的列表（您可以阅读完整的文档here）。

基本上：

无：元素永远不是指针事件的目标；但是，如果指针后代的指针事件设置为其他值，则指针事件可以将其后代元素作为目标。在这种情况下，指针事件将在事件捕获/冒泡阶段期间按适当的方式触发该父元素上的事件侦听器。

摘要

body {
  background-color: silver;
}

.wrapper {
  position: relative;
}

.search-results-wrapper {
  position: absolute;
  top: 30px;
  left: 0;
}

.search-results {
  background-color: white;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  ul {
    padding-left: 0;
  }
  li {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
    &:nth-child(even) {
      background-color: wheat;
    }
  }
}

.overlay {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: white;
  opacity: 0.7;
  pointer-events: none;
}

<div class="wrapper">
  <input type="text" placeholder="Search phrase"></input>
  <div class="search-results-wrapper">
    <div class="overlay"></div>
    <div class="search-results">
      <!-- place semi transparent overlay here -->
      <div>Suggestions:</div>
      <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
      <div>Page 1/20</div>
    </div>
  </div>
</div>

将子级扩展到父级可滚动内容的100％高度

1 个答案:

摘要