使用 Safari 在输入焦点上不需要的自动滚动到顶部
Posted
技术标签:
【中文标题】使用 Safari 在输入焦点上不需要的自动滚动到顶部【英文标题】：Unwanted auto-scrolling to top on input focus, with Safari 【发布时间】：2019-04-23 17:00:31 【问题描述】：我有这个页面：
<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
【问题讨论】：
我无法在 MacOS 上的 Safari 中复制所述行为。我向下滚动到输入字段，将鼠标悬停在它上面，单击它，按 Tab 键，无论它如何获得焦点，都不会发生滚动，内容保持不变。 很奇怪，我刚录了一段视频：imgur.com/a/hPD9YuP 我刚查了一下，Safari 12.0.x 中没有，但我在 Safari 12.1 中确实发生了 【参考方案1】：将1fr 替换为minmax(0, 1fr) @helios。它对我有用。这是它的完整解释。 https://css-tricks.com/preventing-a-grid-blowout/。我用你的小提琴测试过。效果很好。
【讨论】：
在扯掉我的头发 3 小时后找到了这个修复程序，试图弄清楚为什么会发生这种情况。它还取消了任何附加的事件处理程序（通过 React）。这个简单的更改如何影响 Safari 的事件处理/滚动定位我无法想象，但确实如此。非常感谢！【参考方案2】：在您的页面容器上设置 max-height:100%
.page-container
overflow-y: auto
overflow-x: hidden
max-height: 100%
【讨论】：
以上是关于使用 Safari 在输入焦点上不需要的自动滚动到顶部的主要内容，如果未能解决你的问题，请参考以下文章