时间戳

首页 > 解决方案 > 可滚动 ol 之后和之前

html - 可滚动 ol 之后和之前

问题描述

我的 ol 上有我想为其位置设置动画的边框，但它们会随着内容滚动。有没有办法在不引入另一个节点的情况下修复它们？

div{
  height: 100vh;
  width: 30%;
}
ol{
  height: 60%;
  width: 100%;
  overflow-y: scroll;
  position: relative;
}
ol::before,
ol::after{
  content: '';
  height: 5px;
  background: red;
  width: 100%;
  position: absolute;
}
ol::after{
  bottom: 0;
}
li{
  height: 300%;
}
<div>
  <ol>
    <li/>
  </ol>
</div>

标签： htmlcss

解决方案

可能的解决方案：将相对位置移动到先前的祖先

元素的位置position: absolute最终是相对于最近的祖先的位置而不是静态的。如果我们有ol未定义的位置，而是将其父级（div）设置为position: relative它将绝对定​​位排除在 ol 的滚动行为之外......那么，伪元素的顶部和/或底部值取决于div/parent 而不是 ol 本身，所以相应地调整底部值。在这种情况下，它将是底部：40%，以抵消您定义为 60% 的 ol 的高度。

div {
  height: 100vh;
  width: 30%;
  position: relative;
}

ol {
  height: 60%;
  width: 100%;
  overflow-y: scroll;
}

ol::before,
ol::after {
  content: '';
  height: 5px;
  background: red;
  width: 100%;
  position: absolute;
}

ol::after {
  bottom: 40%;
}

li {
  height: 300%;
}
<div>
  <ol>
    <li/>
  </ol>
</div>

我不太确定这是否是您正在寻找的东西，我将根据需要编辑我的答案以澄清任何事情。我也会尝试尽快更新一些参考资料。

推荐阅读