如何解决在使用滚动快照时实现页脚
我正在尝试使用 CSS scroll-snap 使我的网站的用户体验更加愉快。 虽然预期的滚动效果有效,但我的页脚在网站内的每个内容“页面”上都是可见的。 这是基本结构:
<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;
}
我希望滚动捕捉效果允许 main-news
和 main-footer
之间的平滑变化,其中 main-footer
代表页面的底部。在这部分中,我希望底部有一个固定的页脚。我尝试了 position: absolute
和 position: relative
与 bottom:0
以及将页脚放在 main-footer
中,但页脚仍然出现在上 div {{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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。