1.普通div滚动事件
如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。
setTimeout(() => {
const dombox = document.querySelector("#dombox");
dombox.addEventListener("scroll", () => {
console.log("滚动高度", dombox.scrollTop);
});
}, 3000);
2.普通div滚动栏和导航栏联动事件
scrollbox(dataList){
setTimeout(() => {
//获取每个内容div
const domdiv=document.querySelectorAll('.domdiv')
//累加高度
var arr=[20]
var sum=0
domdiv.forEach((e)=>{
sum=e.clientHeight+sum
arr.push(sum)
})
//获取对应code和高度数组
const bb= dataList.map((e,index)=>{
return{
code:e.paragraphNo,
height:arr[index]
}
})
//获取div的滚动栏
const dombox = document.querySelector("#dombox");
dombox.addEventListener("scroll", () => {
bb.forEach(e=>{
//在区间内跟随滚动
if(dombox.scrollTop-e.height<e.height&&dombox.scrollTop-e.height>0){
this.currentSectionCode = e.code;//样式高亮
}
})
});
}, 1000);
},
3.富文本tinymce滚动事件
setTimeout(() => {
var a = 0;
var b = 0;
//给富文本添加监听事件
const documents = this.$tinymce.activeEditor.contentDocument;
//监听鼠标滚动事件
documents.addEventListener("mousewheel", (e) => {
b = 2;
//监听滚动栏事件
documents.addEventListener("scroll", () => {
a = 1;
});
setTimeout(() => {
if (a == 1 && b == 2) {
console.log("documents", documents);
a = 0;
} else if (b == 2) {
if (e.wheelDeltaY > 0) {//向上操作
console.log("up");
} else {
console.log("down");//向下操作
}
}
}, 500);
});
}, 3000);