阻止 Chrome 保持相对于底部的滚动位置

Question

阻止 Chrome 保持相对于底部的滚动位置

ope*_*pex 4 html javascript firefox google-chrome

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

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

当内容区域的滚动位置位于最顶部（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);
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

我遇到了类似的问题，并发现了这个（https://github.com/angular-ui/ui-scroll/issues/138）。我必须添加overflow-anchor:none;一个父元素来阻止 Chrome 的行为。在你的例子中，我通过添加这种风格来让它工作.scrollbar

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

归档时间：	5 年，5 月前
查看次数：	1669 次
最近记录：	5 年，3 月前