标题重写为：如何实现底部粘贴功能的滚动效果？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

标题重写为：如何实现底部粘贴功能的滚动效果？

P粉587780103 2023-09-09 19:41:49

[CSS3讨论组]

833

我正在尝试实现一个类似我在这里看到的效果

但是每个部分的内容也应该是可滚动的，即只有在达到部分底部时才会固定。

例如，当内容为200vh时，像这样：

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}

<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

正如你所看到的，第1和第2部分固定在顶部，我们无法滚动查看它们的照片。

但是最后一部分完美地工作。

那么我该如何实现这个效果？理想情况下使用纯CSS，但我也接受JavaScript解决方案。

P粉587780103

全部回复(1)

P粉1419251812023-09-10 18:28:14 1楼

我找到了一个解决方案！使用JavaScript中的一行代码来设置top

document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });

section{
  position:sticky;
  width:100%;
  height:200vh;
}

img{
  object-fit:cover;
  height:100%;
  width:100%;
}

<section class="item">
 <img src="https://picsum.photos/id/128/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/48/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/42/800">
</section>

虽然我不确定如果窗口被调整大小是否会起作用
但你可以始终使用onresize来处理这种情况

如果有的话，我仍然可以接受纯CSS解决方案？