内容自动滚动

Wait A Minute

已于 2024-06-06 16:47:27 修改

阅读量115

点赞数 2

文章标签： javascript 前端开发语言

于 2024-05-30 14:35:21 首次发布

本文链接：https://blog.csdn.net/weixin_43493318/article/details/139323608

版权

内容自动滚动，鼠标移入停止滚动，移出之后继续滚动，主要解决echarts滚动问题

html

<div class="chartsbox">
   <div style="height:280px; width:990px; position: absolute;" v-show="loading" v-loading="loading" element-loading-text="加载中" element-loading-background="#293447"></div>
   <div id="firstScrollbox" class="chartboxs" :style="{'visibility':loading==false?'inherit':'hidden'}">
     <div class="echartslist">
       <div class="lineBox" v-for="(rows, index) in zbssqsData" :key="rows.title">
         <p class="chartTitle">{{ rows.title }}</p>
         <div class="chartdiv">
           <!-- 封装的chart组件 -->
           <LineChart></LineChart>
         </div>
       </div>
     </div>
   </div>
 </div>

js部分

// 挂载
onMounted(() => {
  // 设置滚动
  nextTick(()=>{
    const leftchart:any = document.getElementById('firstScrollbox');
    autoScroll(2, 100, 1000, leftchart); // 平滑移动
  })
});

样式

// 更新内容与设置滚动的div区分一下
.chartsbox {
  width: 98%;
  height: 280px;
  .chartboxs { // 滚动div样式
    width: 100%;
    height: 280px;
    margin: 10px 1px 1px 1px;
    overflow-y: scroll;
    position: relative;
  }
  .echartslist{ // 数据刷新的div样式
    width: 100%;
    height: 1450px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
  }
  .lineBox {
    margin: 10px 20px;
    .chartTitle {
      text-align: center;
      margin: 0px 0px 5px;
    }
  }
}

自动滚动方法


/* div内容上下滚动
* stepLength：一次滚动步长
* speed：滚动速度
* delay：停留时间
* element：Element对象
* element.offsetHeight 元素的像素高度（包括边框和填充）
* element.scrollTop 元素的内容垂直滚动的像素
* element.scrollHeight 元素的高度（包括带滚动条的隐蔽的地方）
*/

function autoScroll(stepLength:number, speed:number, delay:number, element:any) {
  let interval:any;
  element.scrollTop = 10;
  
  function start() {
    interval = setInterval(scrolling, speed)
    element.scrollTop += stepLength
  }
  function scrolling() {
    var sTop = element.scrollTop;
    element.scrollTop += stepLength;
    if (sTop === element.scrollTop || sTop == 0||element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
      stepLength *= -1 // 转换方向
      clearInterval(interval)
      setTimeout(start, delay)
    }
  }
  if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
    setTimeout(start, delay)
  }
  element.addEventListener('mouseover',()=>{
    clearInterval(interval)
  })
  element.addEventListener('mouseleave',()=>{
    start();
  })
}