监听普通滚动条事件和监听富文本tinymce滚动事件普通div滚动栏和导航栏联动事件

原创已于 2022-06-22 16:18:20 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

于 2022-06-22 10:08:55 首次发布

本文探讨了JavaScript中普通div的滚动事件，详细解释了scrollTop属性的含义，并展示了如何实现滚动条与导航栏的联动效果。此外，还介绍了如何在富文本编辑器tinymce中监听滚动事件，包括鼠标滚轮和滚动条的行为分析。

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);