Chrome 使用 css-grid 和溢出重置滚动位置：auto答案

【问题标题】：Chrome resets scroll position with css-grid and overflow:autoChrome 使用 css-grid 和溢出重置滚动位置：auto
【发布时间】：2018-01-30 08:29:02
【问题描述】：

我正在处理一个页脚元素“粘贴”到页面底部的页面（使用旧的position: fixed 以实现兼容性），直到用户向下滚动足够远以使其成为position: static。

但是，当fixed 变为static 时，chrome 会将父 div 滚动回顶部。

我做了一个codepen来说明。

https://codepen.io/Sulsay/pen/eVmmNZ

将其拖动到足够小以显示滚动条；
向下滚动；
当紫色条变为全角 (position: fixed) 时，您会注意到 Chrome 会自动将 #content div（带有 overflow: auto）滚动回顶部。

我已将笔缩减为仅包含网格布局和#content div 上的overflow: auto。 Chrome 似乎不喜欢这种组合。删除 overflow: auto 消除了滚动问题，但也会导致标题和侧边栏滚动，这是我不想要的。

其他浏览器显示预期的行为，即保持滚动位置而不是跳回顶部。

这是 Chrome 特有的，并且可能是一个错误吗？还是我错过了什么？我搜索了 SO 和 chrome bug tracker，但令我惊讶的是，什么也没找到。

【问题讨论】：

我也遇到了这个问题。我的情况略有不同，但我有相同的 display:grid 包装器和 overflow:auto 孩子。就我而言，我没有任何position:fixed，但是当我通过 javascript (React) 更新可滚动 div 的内容时，它会滚动回顶部。也许任何时候 div 重新流动都会发生这种情况？对我来说，这似乎是一个 Chrome 错误。相同的代码在 Firefox 中运行良好。

标签： css google-chrome overflow grid-layout

【解决方案1】：

在浏览此错误的其他解决方案时，我发现这个 hack-fix 非常适合我：https://stackoverflow.com/a/49560943（感谢 Chris Boon）

总结修复，而不是使用auto 或1fr 作为网格行高，使用minmax(1px, 1fr)。这似乎迫使浏览器在计算区域高度时更加小心，并防止滚动跳到顶部或底部。

我已经为您的示例笔调整了修复：

https://codepen.io/a-type/pen/RJqJwL

当您的页脚从固定变为静态时，这不会阻止滚动高度发生变化，但这是当元素移入和移出滚动容器内的布局流时的预期行为。但是，在我的本地 Chrome (67.0.3396.62) 中，它确实阻止了滚动区域跳回 0。

请注意，这个 hack-fix 似乎对性能有一些不利影响，但我没有亲自测量过。

【讨论】：

【解决方案2】：

window.addEventListener("DOMContentLoaded", () => {
  setInterval(() => {
    const testSubject = document.getElementById("test-subject");
    const stylePosition = testSubject.style.position;
    testSubject.style.position = stylePosition === "fixed" ? "static" : "fixed";
  }, 500);
});

请改变

window.addEventListener("DOMContentLoaded", () => {
  setInterval(() => {
    const testSubject = document.getElementById("test-subject");
    const stylePosition = testSubject.style.display;
    testSubject.style.display = stylePosition === "none" ? "inherit" : "none";
  }, 500);
});

【讨论】：

没有回答这个问题。这会使栏消失并且不会使其静止
window.addEventListener ("DOMContentLoaded", () => {document.getElementById ("test-subject").style.position = 'static';}); bu ko d 静态制作

【解决方案3】：

我花了一些时间找到一个合适的解决方案，但得到了一个你可以忍受的：

https://codepen.io/anon/pen/YeXqXd

我不是固定的和静态的，而是固定的和绝对的。此外，我添加了一个

<div id="#contentwrapper">

并给了它：

 #contentwrapper{
  position: relative;
  padding-bottom: 50px;
}

如果粘性页脚是整个页面的页脚（如示例中所示），您也可以将其永久固定并在#content 中添加填充底部，但如果后面还有其他元素，您可能需要包装器和相对/绝对。

编辑：忘记溢出：#contentwrapper 的自动

编辑了codepen

【讨论】：

这会滚动整个页面，而不仅仅是内容 div。我可能最终会使用 position:absolute 的东西，但我很困惑为什么这会导致 chrome 出现问题，而不是任何其他支持网格的浏览器。
对不起，忘记了包装器上的溢出自动。我用codepen修复了它。更改位置时，您可能还需要使用 javscript 更改“底部”规则。遗憾的是，我无法告诉您为什么会在 chrome 中发生这种情况。

【解决方案4】：

这是一个 Chrome 错误，在撰写本文时尚未解决。我知道的唯一解决方法是当内容/css 可能通过 javascript 更改时，不要在 css 网格元素中使用可滚动元素。

参考：https://bugs.chromium.org/p/chromium/issues/detail?id=833837

【讨论】：