借助Safari不需要的自动滚动功能就可以使输入焦点居于首位 [英] Unwanted auto-scrolling to top on input focus, with Safari
问题描述
我有此页面:
<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/
Also available at: https://jsfiddle.net/1vk5jcuL/
在Safari 12.1(MacOS和iOS)上，如果向下滚动主体并将鼠标悬停在输入上，它将自动滚动到顶部.
On Safari 12.1 (MacOS and iOS), if you scroll down the main body and hover/focus over the input, it will automatically scroll to top.
我想保持滚动行为不变(即，当您滚动时，仅滚动主面板，而不滚动侧导航键，而Safari浏览器不应滚动到输入焦点的顶部.
I would like to keep the scrolling behavior the same (i.e. when you scroll you scroll only the main panel, not the side-nav, but safari shouldn't scroll to top on input focus.
此问题仅与HTML + CSS有关，因此不涉及JS.
This problem is purely about HTML + CSS, so no JS involved.
这是它发生的GIF记录: https://imgur.com/a/hPD9YuP
this is a GIF recording of it happening: https://imgur.com/a/hPD9YuP
推荐答案
用 minmax(0，1fr) @helios替换 1fr .它为我工作.这是它的完整说明. https://css-tricks.com/preventing-a-grid-blowout/.我用你的小提琴进行了测试.效果很好.
Replace 1fr with minmax(0, 1fr) @helios. it worked for me. Here is the full explanation of it. https://css-tricks.com/preventing-a-grid-blowout/. I tested with your fiddle. it worked fine.
这篇关于借助Safari不需要的自动滚动功能就可以使输入焦点居于首位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
