我想在vue项目里加一个滚动时间轴,找到一个好看的JavaScript版本的,想自己动手修改成vue的,但是出来这个报错。
<script>
export default {
name: 'info',
data(){
return{
el:null
}
},
mounted() {
this.isElementInViewport(this.el)
this.callbackFunc()
this.addEvent()
},
methods :{
isElementInViewport(el) {
let obj = el.target
let rect = obj.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
},
callbackFunc() {
let items = document.querySelectorAll(".timeline li");
for (let i = 0; i < items.length; i++) {
if (this.isElementInViewport(items[i])) {
if(!items[i].classList.contains("in-view")){
items[i].classList.add("in-view");
}
} else if(items[i].classList.contains("in-view")) {
items[i].classList.remove("in-view");
}
}
},
addEvent(){
window.addEventListener("load", this.callbackFunc);
window.addEventListener("scroll", this.callbackFunc);
}
}
}
</script>
上面是我自己修改的,下面是源码
<script>
var items = document.querySelectorAll(".timeline li");
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
if(!items[i].classList.contains("in-view")){
items[i].classList.add("in-view");
}
} else if(items[i].classList.contains("in-view")) {
items[i].classList.remove("in-view");
}
}
}
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
</script>
问题出现的环境背景及自己尝试过哪些方法
相关代码
粘贴代码文本(请勿用截图)
你期待的结果是什么?实际看到的错误信息又是什么?
###this.el -> this.$el
细心哇少侠!