防止 Chrome 保持滚动位置相对于底部答案

【问题标题】：Prevent Chrome from keeping scroll position relative to bottom防止 Chrome 保持滚动位置相对于底部
【发布时间】：2020-09-10 08:49:12
【问题描述】：

我有一个带有内容区域的布局，它有自己的滚动条，因为我希望侧边栏独立滚动。

使用底部的按钮动态附加内容区域的内容。

当内容区域的滚动位置位于最顶部 (scrollTop === 0) 并且我附加更多内容时，滚动位置将保持在顶部。但是，如果滚动位置不在顶部，Firefox 和 Chrome 的行为会有所不同。在 Firefox 中，滚动位置保持相对于顶部，内容附加在下方，必要时在屏幕外。然而，在 Chrome 中，滚动位置保持相对于底部，使按钮保持在同一位置，导致用户必须向上滚动才能看到新内容。

有没有办法让 Chrome 的行为像 Firefox 一样？

澄清一下。添加新内容后，我不希望内容区域滚动到底部。我希望它保持原样，以便用户不必向上滚动即可查看新内容。

var count = 1;

window.addEventListener('load', function() {
  var container = document.querySelector('[data-result]');
  var button = document.querySelector('button');

  button.addEventListener('click', function() {
    for (var i = 0; i < 10; i++) {
      var element = document.createElement('div');
      element.innerHTML = 'Content row ' + count++;

      container.appendChild(element);
    }
  });
});

html,
body,
.page {
  height: 100vh;
  margin: 0;
}

body {
  background-color: #eceff1;
}

.page {
  display: flex;
  flex-direction: column;
}

.header {
  padding: .5rem;
}

.view {
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
}

.sidebar {
  display: inline-flex;
  flex-shrink: 0;
}

.content {
  margin-left: .5rem;
  display: flex;
  flex-grow: 1;
  margin-bottom: 2rem;
}

.scrollbar {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.card {
  background-color: #fff;
}

.menu {
  white-space: nowrap;
  padding: .3rem .5rem;
}

<!doctype html>
<html lang="en">

  <head>
    <title></title>
  </head>

  <body>
    <div class="page">
      <div class="header">Header</div>
      <div class="view">
        <div class="sidebar">
          <div class="scrollbar">
            <div class="card">
              <div class="menu">Sidebar row 1</div>
              <div class="menu">Sidebar row 2</div>
              <div class="menu">Sidebar row 3</div>
              <div class="menu">Sidebar row 4</div>
              <div class="menu">Sidebar row 5</div>
              <div class="menu">Sidebar row 6</div>
              <div class="menu">Sidebar row 7</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="scrollbar">
            <div data-result></div>
            <div>
              <button>
                Show more
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

【问题讨论】：

如果您希望它在插入新元素后始终显示滚动到最底部的元素，那么也只需通过脚本强制。
这能回答你的问题吗？ Scroll to bottom of div?
像往常一样，现实比代码 sn-p 复杂得多。现实是一个模块化的 React 应用程序，其中滚动条与动态加载的内容相去甚远。但是，如果唯一的方法是在添加内容之前和之后保持对滚动位置的引用并恢复以前的值。我想我会去那个兔子洞。在我看来，我只是希望有更优雅的东西来应对 Chrome 的怪异行为。

标签： javascript html google-chrome firefox

【解决方案1】：

我遇到了类似的问题，发现了这个 (https://github.com/angular-ui/ui-scroll/issues/138)。我不得不将 overflow-anchor:none; 放在父元素上以阻止 Chrome 的行为。在您的情况下，我通过将此样式添加到 .scrollbar 来使其工作

注意：这个css不兼容IE或者Safari，但是这个问题在Safari上不会发生，也没有人关心IE了..:)

【讨论】：

【解决方案2】：

我当前的解决方案是在添加更多内容之前保存可滚动 div 的 scrollTop，如果在添加内容后更改该值，则恢复该值。这将使 Chrome 的行为或多或少像 Firefox。

不幸的是，这不是一个完美的解决方案，因为 Chrome 中的内容会快速闪烁，因为它会滚动到底部而不是返回。

【讨论】：