Javascript scrollIntoView仅在直接父级中

如何使

scrollIntoView

仅滚动直接父级（例如

div

和

overflow-y:scroll；

）而不是整个页面

我有一个网络界面，我正在为一个内部的，非常具体的目的。在我的页面上的其他元素中，有一个指定高度的

div

，而

overflow-y

是

scroll

我有数据会定期出现在这个区域，我希望它总是滚动到底部（例如，某个远程服务器上的子进程的控制台输出）

如果我使用

scrollIntoView

，它会滚动

overflow-y

div

。。。。。但也可以滚动整个页面

---

在有大屏幕显示器的电脑上，这不是问题，但在我的屏幕较小的笔记本电脑上，它也会滚动整个窗口，这绝对不是预期的行为。

我认为您正在寻找

滚动顶部

和

滚动高度

的组合。您可以使用第一个选项设置div滚动到的位置，第二个选项获取div中所有信息的高度：

var scrollyDiv=document.getElementById（“容器”）；
scrollyDiv.scrollTop=scrollyDiv.scrollHeight
设置间隔（（）=>{
var textnode=document.createElement（“P”）；
textnode.innerHTML=“无论什么”
scrollyDiv.appendChild（textnode）；
scrollyDiv.scrollTop=scrollyDiv.scrollHeight
}，1000）

#容器{
高度：200px；
溢出y：滚动；
}
#大内容{
高度：400px；
背景颜色：绿色；
}

底部

我试图重现您的案例，我认为

scrollIntoView（）

不会如您所愿工作。尝试改用

scrollTop

。 希望这能节省你的时间

const btn=document.getElementById（'js-scroll'）；
btn.addEventListener（'单击'，（）=>{
const targets=document.querySelectorAll（'.scrollable'）；
targets.forEach（t=>{
//滚动每个项目
t、 scrollTop=t.scrollHeight；
});
});
。滚动btn{
位置：固定；
左：10px；
顶部：10px；
填充：10px；
字号：700；
字体大小：16px；
}
.内容{
最小高度：100vh；
背景色：#EFEF；
填充：35px 10px；
}
.可滚动{
利润率：15px；5px；
填充物：5px；
背景色：#fafafa；
高度：500px；
溢出y：滚动；
溢出x：隐藏；
}
.可滚动数据{
填充：10px；
边缘底部：1px；
最小高度：600px；
背景色：#55b7ab；
}
滚动
一些数据1
一些数据1
一些数据2
一些数据2
一些数据3
一些数据3
React 16的解决方案

下面是使用React 16解决此问题的答案，适用于希望在某个事件发生时滚动到可滚动元素底部的人。我的问题是scrollIntoView（）导致整个窗口调整，这是不可取的；只需要滚动元素按需滚动到底部（如终端）

使用
overflowY:“scroll”
向元素添加一个ref，并使用公式
this.body.current.scrollTo（0，this.body.current.scrollHeight）
，如下所示：

constructor（）{
...
this.body=React.createRef（）//创建对可滚动元素的引用
}
...
componentDidUpdate（prevProps，prevState）{//或任何您想要的操作
//重要部分，滚动至y坐标
//这是总高度，也就是底部。
//.current很重要，因为您需要
//现在渲染的那个ref。
this.body.current.scrollTo（0，this.body.current.scrollHeight）
...
}
...
render（）{
返回(
//在这里标记ref
....
}
我想你可能要找的是

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

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