Question

我正在处理页面，其中页脚元素“粘贴”到页面底部（使用良好的旧position: fixed以获得兼容性），直到用户向下滚动足够远以使其成为{{ 1}}。

但是，当position: static变为fixed时，chrome会将父div重新滚动到顶部。

我做了一个代码来说明。

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

拖动它足够小以显示滚动条;
向下滚动;
当紫色条变为全宽（static）时，您会注意到Chrome会自动将position: fixed div（带#content）滚动到顶部。

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

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

此Chrome是否具体，可能是错误？或者我错过了什么？我搜索了SO和Chrome bug跟踪器，但令我惊讶的是，没有任何事情发生。

Answer 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似乎会对性能产生一些不利影响，但我个人尚未对其进行评估。

Answer 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);
});

Answer 3

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

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

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

<div id="#contentwrapper">

并且给了它：

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

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

编辑：忘记溢出：自动执行#contentwrapper

编辑了codepen

Answer 4

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

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

Chrome使用css-grid和overflow：auto重置滚动位置

4 个答案: