滚动页面时滚动主容器.当滚动到容器底部时，滚动页面的其余部分(显示页脚等)

Question

我正在尝试实现本页中的滚动https://docs.docker.com/engine/.请注意，中心容器与页面滚动条一起滚动，使左侧和右侧的链接容器保持固定。滚动到容器底部后，页面的其余部分将滚动以显示页脚。到目前为止，我已经尝试在中心容器和外部容器上设置溢出：auto。我隐藏了中央容器的滚动条，只显示了外部容器(即页面(的滚动条。所以我可以单独滚动页面和中央容器。当页面滚动时，我想滚动中央容器，当滚动到达中央容器底部时，我想要滚动页面的其余部分(有页脚等(

<div class="main_page">
<div class="header"></div>
<div class="main">
<div class="left_navigation"></div>
<div class="main_content"></div>
<div class="right_navigation"></div>
</div>
<div class="footer"></div>
</div>

因此，我必须固定标题、左导航和右导航，只滚动main_content。滚动到main_content的底部后，页面的其余部分应该滚动，以便页眉、左导航、右导航和main_contend向上移动，并显示页脚。我使用的是没有任何jquery的纯javascript。

Answer 1

您可以像您提到的示例页面一样使用粘性位置

只需在left_navigation容器中再添加一个容器，即可玩高度

工作exc如下：

<style>
.header {
height: 50px;
background: #00BCD4;
}
.footer {
background: #673AB7;
height: 250px;
}
.main {
display: flex;
flex: 1;
}
.left_navigation {
background: #3F51B5;
flex: 1;
}
.main_content {
background: #03A9F4;
flex: 1;
}
.right_navigation {
background: #2196F3;
flex: 1;
}
.inner-left-nav {
position: sticky;
top: 0;
height: auto;
max-height: 100%;
}
</style>
<div class="main_page">
<div class="header">header</div>
<div class="main">
<div class="left_navigation">
<div class="inner-left-nav">
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
left nav<br>
</div>
</div>
<div class="main_content">
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
<p>main content here main content here main content here main content here 
main content here main content here main content here main content here </p>
</div>
<div class="right_navigation">right nav</div>
</div>
<div class="footer"></div>
</div>

Answer 2

可以通过包装右侧导航并添加position: sticky。

进一步阅读：

• MDN Web文档
• CSS位置粘贴-它是如何真正工作的
• CSS技巧
• 此堆栈溢出答案

.main-page {
position: relative;
}
.header {
height: 60px;
background: #00BCD4;
}
.main {
display: flex;
}
.main_content {
background: #03A9F4;
height: 100vh;
}
.right_navigation {
position: absolute;
right: 0;
height: 100vh;
}
.inner-right-nav {
position: sticky;
top: 0;
height: 50vh;
width: 50vw;
background: #3F51B5;
}
.footer {
background: #673AB7;
height: 100vh;
}

<div class="main-page">
<div class="header">header</div>
<div class="main">
<div class="main_content">
<p>main content here main content here main content here main content here main content here main content here main content here main content here </p>
</div>
<div class="right_navigation">
<div class="inner-right-nav">
left nav
</div>
</div>
</div>
<div class="footer">footer</div>
</div>

Answer 3

我认为您需要使用overcroll behavior CSS属性。

默认情况下，移动浏览器倾向于提供一个；反弹；当到达页面(或其他滚动区域(的顶部或底部时，效果甚至页面刷新。你可能还注意到，当你在一页滚动内容的顶部有一个滚动内容的对话框时，一旦达到对话框的滚动边界，底层页面就会开始滚动——这被称为滚动链接。