我有一个带以下样式的div
内的table
:
#data {
overflow-x:hidden;
overflow-y:visible;
height:500px;
}
当表格中添加足够的数据时,将显示垂直滚动条。但是,当添加新数据时,我希望 div
元素自动滚动到底部。
我应该使用什么 JavaScript 代码来实现这个功能?如果必要,我也可以接受 JQuery 的方案,但更倾向于使用纯 JavaScript。
我有一个带以下样式的div
内的table
:
#data {
overflow-x:hidden;
overflow-y:visible;
height:500px;
}
当表格中添加足够的数据时,将显示垂直滚动条。但是,当添加新数据时,我希望 div
元素自动滚动到底部。
我应该使用什么 JavaScript 代码来实现这个功能?如果必要,我也可以接受 JQuery 的方案,但更倾向于使用纯 JavaScript。
如果你不知道何时会向#data
添加数据,你可以设置一个时间间隔,每几秒钟更新元素的scrollTop到其scrollHeight。如果你控制何时添加数据,只需在添加数据后调用以下函数的内部。
window.setInterval(function() {
var elem = document.getElementById('data');
elem.scrollTop = elem.scrollHeight;
}, 5000);
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
function setFocusOnDivWithId(elementId) {
const scrollIntoViewOptions = { behavior: "smooth", block: "center" };
document.getElementById(elementId).scrollIntoView(scrollIntoViewOptions);
};
setFocusOnDivWithId(elementId);
该代码片段定义了一个名为setFocusOnDivWithId
的函数,它接受一个参数elementId
,该参数是要聚焦的元素的ID。使用滚动选项{ behavior: "smooth", block: "center" }
将页面滚动到所需元素,并将其对齐到视口中心位置。最后,使用setFocusOnDivWithId(elementId)
调用该函数并传递所需元素的ID作为参数。 - Sk96