我有此页面:
<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://imgur.com/a/hPD9YuP
答案 0 :(得分:1)
用1fr
@helios替换minmax(0, 1fr)
。它为我工作。这是它的完整说明。 https://css-tricks.com/preventing-a-grid-blowout/。我用你的小提琴测试了。效果很好。
答案 1 :(得分:0)
在页面容器上设置最大高度:100%
.page-container
overflow-y: auto
overflow-x: hidden
max-height: 100%