使用伪元素before来填充可滚动元素

Question

如果父元素是可滚动的，那么使用before伪元素是否可以垂直填充一个元素？

我很难让before占用比父元素外部高度更多的空间，而不是可滚动的高度。

#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
}

#example:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

我可能可以强制before使用大高度，但理想情况下，我希望正确设置高度。

是否有任何方式只通过CSS更改来解决这个问题？

- DBS

---

不，这是不可能的，只有一个元素是不行的。虽然将顶部和底部设置为0意味着“获取父元素的高度”，但实际上该父元素的高度仍为150像素。您需要首先引入另一个HTML元素，一个没有高度限制的元素，并将伪元素放入其中。 - 04FS

Answer 1

我不确定这是否可以使用CSS实现。但是，如果您在可滚动的DIV中添加一个子元素，并且为此新DIV创建伪元素，则可以获得类似的结果。如果您感兴趣，请查看下面的示例。

#example {
  width: 300px;
  height: 150px;
  overflow-y: auto;
}
#example>div{
  position: relative;
  background: yellow;
}
#example>div:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5);
}

<div id="example">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div></div>

- Pons Purushothaman

Answer 2

如果您不能考虑使用额外的包装器，这里有一个关于粘性元素的技巧：

#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
}

#example:before {
  content: " ";
  display:block;
  position: sticky;
  top: 0;
  height:100%;
  margin-bottom:-150px; /* Same as height */
  background-color: rgba(255, 0, 0, 0.5);
}

<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

- Temani Afif

Answer 3

你可以使用 JavaScript 和 CSS 变量来实现这个功能。

var arheight = $('#example')[0].scrollHeight;
$(':root').css('--height', arheight);

#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
}

#example:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.5);
  height: var(--height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

- Arindam Sarkar

Answer 4

你可以这样做

body {
margin:0;
}
#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
  overflow-x:hidden;
  
}

#example:before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width:300px;
  height:150px;
  background-color: rgba(255, 0, 0, 0.5);
  z-index:-1;
}

<div id="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Vitae auctor eu augue ut. Tempor nec feugiat nisl pretium fusce id velit. Amet est placerat in egestas erat imperdiet sed euismod nisi. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Adipiscing diam donec adipiscing tristique risus nec feugiat in. Tortor posuere ac ut consequat. Elit pellentesque habitant morbi tristique. Enim lobortis scelerisque fermentum dui faucibus in ornare. Dolor purus non enim praesent. Pharetra convallis posuere morbi leo urna molestie.</div>

- vinay choudhary

---

我用鼠标无法滚动它。你可以吗？ - Mobarak Ali

这是一个好主意，但不幸的是我必须知道/计算元素在页面上的确切位置（因为fixed相对于页面而不是最近的relative元素）。 - DBS

如果您在示例中使用了 height width，请在 :before 中使用相同的方法。 - vinay choudhary