css - 到达页脚时如何滚动固定区域？

Question

请问是否可以在 CSS 中实现以下配置？

• 我有一个长页面，底部有页脚(页脚显示属性为 flex)
• 在页面的可见区域，只要滚动还没有到达页脚，我就需要固定区域始终位于底部。
• 滚动到页脚后，固定区域应向上滚动到页脚顶部，如下面的屏幕截图所示:

1. 固定区域在页面可见区域的底部。

2. 滚动时，如果未到达页脚，则固定区域将保留在页面底部

3. 到达页脚时，固定位置在页脚顶部

我试过类似的方法:

FixedArea {
    position: fixed;
    bottom: 0;
    width: 100%;
}

但是当我滚动到页脚时，固定区域消失了。

Answer 1

您可以将正文内容与固定内容一起嵌套在一个元素中，该元素具有 height: 100vh 元素，并且 overflow: auto 元素的实际内容页面，这样内容将独立于 fix 元素滚动，一旦到达末尾，主体滚动将继续直到页面末尾(页脚)