我有这个页面：
<html>
<body>
<div class="app">
<div class="main-panel">
<nav class="navbar"></nav>
<div class="sidenav">
<ul>
<li>First</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
</div>
<div class="page-container">
<div class="placeholder">
<ul>
<li>First</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
</div>
<input type="text">
</div>
</div>
</div>
</body>
</html>
以及以下 CSS：
html, body {
height: 100%;
width: 100%;
position: fixed;
overflow: visible; }
.app {
background-color: #f4f5f8;
height: 100%;
overflow-x: hidden;
overflow-y: auto; }
.main-panel {
height: 100%;
display: grid;
grid-template-columns: 210px 1fr;
grid-template-rows: 76px 1fr; }
.navbar {
grid-column: 1 / 3; }
.page-container {
overflow-y: auto;
overflow-x: hidden; }
.placeholder {
display: block;
height: 500px;
width: 100%; }
也可以在：https://jsfiddle.net/1vk5jcuL/
在 Safari 12.1（MacOS 和 iOS）上，如果您向下滚动主体并将鼠标悬停/聚焦在输入上，它将自动滚动到顶部。
我想保持滚动行为相同（即，当您滚动时，您仅滚动主面板，而不是侧面导航，但 safari 不应在输入焦点上滚动到顶部。
这个问题纯粹是关于HTML + CSS，所以不涉及JS。
编辑：这是它发生的 GIF 记录：https://i.stack.imgur.com/O4wFW.jpg
Replace 1fr with minmax(0, 1fr)@helios。它对我有用。这是它的完整解释。https://css-tricks.com/preventing-a-grid-blowout/。我用你的小提琴测试过。效果很好。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
