❌这不是我想要的,因为它没有坚持到底,也没有固定下来.

(伪元素是白色和透明的渐变)

enter image description here

✅这是我想要的,只有在我没有滚动的时候才是正确的:(

(伪元素是白色和透明的渐变)

enter image description here


我try 了absolutefixedsticky……没有什么帮助,但只有在我们没有滚动的时候,absolute才是正确的,但当滚动时,::before将开始跟随滚动条,这不是我想要的……我希望::在每次停留在底部之前(固定没有帮助,因为它将超出<div>,可能跟随<body>)

我不能更改 struct ,因为我需要使用::before::after,但不能创建新的div,但我可以使用您向我建议的任何CSS

我以为这是个简单的问题,既然fixed就能解决它,但结果很难,fixed从来不会起作用:(我也试着在StackOverflow上看到类似10个问题,但都没有帮助)


这样做的目的是在分割的末尾显示一个小渐变.


演示:

只需try 下面的演示即可查看该错误:

div {
  position: relative;
  width: 300px;
  height: 70vh;
  padding: 1rem;
  border: 2px solid red;
  overflow: auto;
  border-radius: 1rem;
}

div::before {
  content: "";
  position: absolute;
  /* I tried also with fixed, but it goes outside the div :( */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: linear-gradient(to top, white, transparent);
   /*outline: 5px solid blue;*/ /* if you can't see the gradient, uncommnet this line */ 
}
<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
  magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
  soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
  architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
  animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
  officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
  ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
  inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
  dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
  dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
  sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
  sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
  ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
  repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>

推荐答案

这段代码演示了一种使用伪元素上的位置粘滞来完成此操作的方法.

然而,它依赖于知道元素的高度和填充,因此适用于您的示例代码,并可能适用于您的特定用例,但不是完全通用的解决方案.

div {
  position: relative;
  width: 300px;
  height: 70vh;
  padding: 1rem;
  border: 2px solid red;
  overflow: auto;
  border-radius: 1rem;
}

div::before {
  content: "";
  position: sticky;
  display: block;
  top: 0;
  left: 0;
  margin-left: -1rem;
  width: 100%;
  height: calc(100% + 1rem);
  background-image: linear-gradient(to top, white, transparent);
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: left bottom;
  margin-top: calc(-70vh - 1rem);
}
<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
  magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
  soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
  architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
  animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
  officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
  ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
  inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
  dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
  dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
  sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
  sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
  ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
  repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>

Html相关问答推荐

卡片上方的文本

由于列中的图像,它们不会随FlexBox中的窗口大小进行调整

选中/取消选中带有_hyperscript的多个复选框

在Chrome中使用手写笔时,滚动条方向反转

Tailwind CSS:overflow-y Property Not Scrolling Unreliably to Bottom with top-[63px]

水平卷轴的内容保持堆叠

平移变换下的SVG剪辑路径行为

从网页中提取URL

如何在ASP.NET Core中添加换行符

标题在实时网站上闪烁

四开:如何右对齐 PDF *和* HTML 中的文本

如何用js和CSS在两点之间画一条线

如何实现与内嵌图像对齐的自动换行?

如何使用CSS将页面标题水平居中对齐

那边界从何而来?

我无法设置使用 Tailwind CSS 创建的仪表板的网格 struct

font awesome 的 CDN/CSS 如何工作?

使用模板循环每行列出 3 个 bootstrap 卡

CSS 斜角与 3 行对齐

我正在try 向我预先存在的导航栏添加响应式汉堡包导航,但由于某种原因它没有显示