vue实现数据上下滚屏效果
需求:实现实时数据滚屏效果,数据5s请求一次实现:思路:分两种情况:1、数据无溢出,即没有滚动条效果时,不处理滚屏效果2、数据有溢出,处理滚屏效果方案:关键词:scrollTop//当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。offsetHeight ://返回元素的高度(包括元素高度、内边距和边框,不包括外边距)scrollHeight...
·
需求:实时数据滚屏效果,数据5s请求一次
实现:
思路:分两种情况:1、数据无溢出,即没有滚动条效果时,不处理滚屏效果
2、数据有溢出,处理滚屏效果
方案:
关键词:scrollTop //当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。
offsetHeight : //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
scrollHeight //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
具体参数了解参见https://www.cnblogs.com/mycognos/p/9131180.html
代码:
//方法
autoScroll() {
const element = document.getElementById("warningList");
// 元素内容没有溢出时,不触发
if (element.offsetHeight !== element.scrollHeight) {
if (this.interval) {
clearInterval(this.interval);
}
element.scrollTop = this.scrollTop; //重新赋值,初始值为0
this.interval = setInterval(() => {
if (
element.scrollTop ===
element.scrollHeight - element.offsetHeight
) {
// 触底
element.scrollTop = 0;
} else {
element.scrollTop += 1;
this.scrollTop = element.scrollTop;
}
}, 100);
}
}
//调用
setTimeout(() => {
this.soeAjaxCon();
}, 5000);
更多推荐
已为社区贡献2条内容
所有评论(0)