在使用滚动捕捉时实现页脚

Question

我正在尝试使用CSS滚动捕捉，使我的网站的用户体验更愉快。当预期的滚动效果起作用时，我的页脚在每个内容页面上都是可见的。在站点内。这是基本结构:

<div class="main-scroll-container">
<div id="main-news">
</div>
<div id="main-footer">
</div>
</div>
<footer class="footer">
[...]
<footer>

CSS:

.main-scroll-container {
overflow: auto;
width: 100%;
height: 100vh;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
}
#main-news {
height: 100vh;
width: 100%;
background-color: [...]
scroll-snap-align: start;
}
#main-footer {
height: 100vh;
width: 100%;
background-color: [...]

scroll-snap-align: start;
}

我想使用scroll-snap效果来实现main-news和main-footer之间的平滑变化，其中main-footer代表页面的底部。在这一部分中，我想在底部设置一个固定的页脚。我尝试了position: absolute和position: relative与bottom:0以及将页脚放在main-footer中，但页脚仍然出现在上部divmain-news的底部。我将非常感谢每一个帮助。

Answer 1

我自己也遇到过类似的问题，在我的情况下，我有几个section，我想在最后一节之后出现一个footer。我最后做的是创建一个id，它有一个有用的名字和计算的height: calc(100vh - 64px);。64px是我的footer的高度，所以当这个id应用到你的元素时，在代码中跟随它的footer现在看起来好像它是最后一个section的一部分。希望这对你有帮助!

HTML

<div class="container">
<section>
// irrelevant content here
</section>
<section id="hack-around">
// irrelevant content here
</section>
<footer></footer>
</div>

CSS

#hack-around {
// 100vh - the height of the footer
height: calc(100vh - 64px);
}
section {
display: flex;
scroll-snap-align: start;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
.container {
width: 100vw;
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}