列表自动滚动的实现及<Element> which has only a getter错误的解决
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题
最近在做列表自动滚动时遇到了
Cannot set property scrollTop of # which has only a getter"错误
原因
在style中,未添加overflow属性
解决
.box {
overflow: hidden;// 重点
width: 800px;
height: 600px;
}
附上列表自动滚动代码
handleScroll(num) {
// 初始化定时器
if (this.timer[num]) {//有定时器,就不要重复启动,否则滑动速度会越来越快
} else {
let _this = this;
let dom = document.querySelectorAll('.item5-body')[num];
let tmpScrollHeight = 0;
let scrollStart = function () {
dom.scrollTop += 1;
if (tmpScrollHeight != dom.scrollTop) {
tmpScrollHeight = dom.scrollTop;
} else {
//滑动到底部时将列表第一项移动到最后一项
let tmpNode = dom.removeChild(dom.childNodes[0]);
dom.appendChild(tmpNode);
}
};
this.timer[num] = setInterval(scrollStart, 100);
//鼠标移入是停止滚动
dom.onmouseover = function () {
clearInterval(_this.timer[num]);
};
//鼠标离开时继续滚动
dom.onmouseout = function () {
_this.timer[num] = setInterval(scrollStart, 100);
};
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)