Question

如何使scrollIntoView仅滚动直接父级（例如，将div与overflow-y: scroll;一起滚动而不滚动整个页面？

我有一个Web界面，用于内部特定目的。我页面上的其他元素是具有指定高度的div和overflow-y是scroll。

我有一些数据会定期出现在此区域，并且我希望它始终滚动到底部（例如，某个远程服务器上的子进程的控制台输出）。

如果我使用scrollIntoView，它会滚动overflow-y div .....但也会滚动整个页面。

在具有大显示器的计算机上，这不是问题，但是在我的屏幕较小的笔记本电脑上，它也会滚动整个窗口，这肯定不是预期的/期望的行为。

Answer 1

我认为您正在寻找scrollTop和scrollHeight的组合。您可以使用第一个设置div滚动到的位置，使用第二个设置div中所有信息的高度：

var scrollyDiv = document.getElementById("container");
scrollyDiv.scrollTop = scrollyDiv.scrollHeight

setInterval(() => {
  var textnode = document.createElement("P");
  textnode.innerHTML = "Whatever"
  scrollyDiv.appendChild(textnode);  
  scrollyDiv.scrollTop = scrollyDiv.scrollHeight
}, 1000)

#container {
  height: 200px;
  overflow-y: scroll;
}

#big-content {
  height: 400px;
  background-color: green;
}

<div id="container">
  <div id="big-content"></div>
  <p>The bottom</p>
</div>

Answer 2

我试图重述您的案子，但我认为scrollIntoView()不能如您所愿。尝试改用scrollTop。希望可以节省您的时间。

const btn = document.getElementById('js-scroll');

btn.addEventListener('click', () => {
  const targets = document.querySelectorAll('.scrollable');
  
  targets.forEach(t => {
    // Scroll each item
    t.scrollTop = t.scrollHeight;
  });
});

.scroll-btn {
  position:fixed;
  left: 10px;
  top: 10px;
  padding: 10px;
  font-weight: 700;
  font-size: 16px;
}
.content {
  min-height: 100vh;
  background-color: #efefef;
  padding: 35px 10px;
}

.scrollable {
  margin: 15px; 5px;
  padding: 5px;
  background-color: #fafafa;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.scrollable-data {
  padding: 10px;
  margin-bottom: 1px;
  min-height: 600px;
  background-color: #55b7ab;
}

<button id="js-scroll" class="scroll-btn">Scroll</button>

<section class="content">
  <div class="scrollable">
    <div class="scrollable-data">Some data 1</div>
    <div class="scrollable-data">Some data 1</div>
  </div>

  <div class="scrollable">
    <div class="scrollable-data">Some data 2</div>
    <div class="scrollable-data">Some data 2</div>
  </div>

  <div class="scrollable">
    <div class="scrollable-data">Some data 3</div>
    <div class="scrollable-data">Some data 3</div>
  </div>
</section>

Answer 3

React 16解决方案

这是使用React 16解决此问题的答案，适用于希望在某些事件中将可滚动元素滚动到其底部的人们。我遇到的问题是scrollIntoView（）导致整个窗口进行调整，这是不可取的。只需将滚动元素按需滚动到底部（如终端）即可。

使用overflowY: "scroll"向元素添加引用，并使用公式this.body.current.scrollTo(0, this.body.current.scrollHeight)，如下所示：

constructor() {
    ...
    this.body = React.createRef() // Create a ref to your scrollable element
}
...

componentDidUpdate(prevProps, prevState) { // or whatever action you want
    // The Important Part, where you scroll to the y-coord 
    // that is the total height, aka the bottom. 
    // .current is important, as you want the version of 
    // that ref that is rendered right now.
    this.body.current.scrollTo(0, this.body.current.scrollHeight) 
    ...
}
...
render() {
   return (
      <div style={style.container}>
            <div ref={this.body} style={style.body}> // React ref tagged here
            ....
            </div>
    </div>
}

Answer 4

我认为您可能正在寻找的是

.scrollIntoView({block: "nearest", inline: "nearest"});

在支持的地方（基本上除了 IE 和 SafarIE 之外的任何地方）这将做“最少”的移动来显示元素；因此，如果外部容器可见，但目标元素隐藏在该容器内 - 那么它应该滚动内部容器而不是页面。

Javascript scrollIntoView仅在直接父级中

4 个答案: