我有一个侧边栏，其高度大于屏幕尺寸，并且在使用时position: sticky，除非滚动到页面末尾，否则我将无法看到侧边栏的底部。
例如，如何确保滚动时页面的 50% 已经显示侧边栏的下部？
这里的代码示例：https://jsfiddle.net/zxypmqvg/3/ https://jsfiddle.net/zxypmqvg/3/
.main-block {
display: flex;
}
.sidebar {
background-color: LightCoral;
width: 25%;
}
.sidebar-content {
margin: 5px;
margin-bottom: 40px;
background-color: LimeGreen;
position: sticky;
top: 0;
}
.main-content {
width: 75%;
height: 4000px;
background-color: LightBlue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="main-block">
<div class="sidebar">
<div class="sidebar-content">
<p>sometext for example for stackoverfrom</p>
<p>sometext for example for stackoverfrom</p>
<p>sometext for example for stackoverfrom</p>
<p>sometext for example for stackoverfrom</p>
<p>sometext for example for stackoverfrom</p>
<p>sometext for example for stackoverfrom</p>
<p>last string</p>
</div>
</div>
<div class="main-content">
</div>
</div>
</body>
</html>
最后一个字符串仅在到达页面末尾时显示
也许，一个好的做法是将此 css 添加到 .sidebar-content
overflow-y: auto;
max-height: 100vh;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
