vue实现页面自动滚动，鼠标悬浮暂停，移开继续

1、给div一个id

<div class="kb_nei_new_left" id="chartsContainer">

2、定义一个自动滚动的方法

autoSroll(Id) {
// flag 为true时停止滚动
        var flag = false;
        // 定时器
        var timer;
        function roll() {
          var h = -1;
          timer = setInterval(function () {
            flag = true;
            //获取当前滚动条高度
            var current = document.getElementById(Id).scrollTop;
            if (current == h) {
              //滚动到底端,返回顶端
              h = 0;
              document.getElementById(Id).scrollTop = h + 2;
            } else {
              //以25ms/3.5px的速度滚动
              h = current;
              document.getElementById(Id).scrollTop = h + 2;
            }
          }, 50);
        }
        // setTimeout(function() {
        //鼠标悬浮暂停。
        document.getElementById(Id).onmouseenter = () => {
          if (flag) {
            flag = false;
            clearInterval(timer);
          }
        };
        //鼠标移开继续
        document.getElementById(Id).onmouseleave = () => {
          if (!flag) {
            flag = true;
            roll();
          }
        };
        roll();
},

3、在合适的时机调用这个方法

this.autoSroll("chartsContainer");

没有实现滚动效果，可能是绑定id的di选择错了

原文地址：https://blog.csdn.net/m0_73463767/article/details/144342789

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！