vue3实现上下无缝滚动效果

lee_amazing

已于 2022-06-02 17:18:09 修改

阅读量2.5k

点赞数

分类专栏： js 文章标签： javascript 前端 css

于 2022-06-02 11:58:09 首次发布

本文链接：https://blog.csdn.net/lee_amazing/article/details/125098191

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

此处以html文件为例，参考了javascript实现无缝上下滚动特效这个案例
对其进行了部分修改，让其更衔接更加自然，需要注意的是要给主容器添加一个定位属性，不然会跳动闪烁特别的明显。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="colee"
      style="
        position: relative;
        overflow: hidden;
        height: 100px;
        width: 410px;
        border: 1px solid red;
      "
    >
      <div id="colee1">
        <p>php</p>
        <p>java</p>
        <p>ruby</p>
        <p>python</p>
        <p>www.phpddt.com</p>
      </div>
      <div id="colee2"></div>
    </div>
    <script>
      //速度设置
      var speed = 10;
      var colee2 = document.getElementById("colee2");
      var colee1 = document.getElementById("colee1");
      var colee = document.getElementById("colee");
      colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
      function Marquee1() {
        //当滚动至colee1与colee2交界时
        if (colee2.offsetTop - colee.scrollTop <= 0) {
          // colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
          colee.scrollTop = 18; //colee跳到最顶端，使用上面的那个会卡掉第一个标签，p对应18基本做到无缝,这个的前提是容器需要有定位属性
        } else {
          colee.scrollTop++;
        }
      }
      var MyMar1 = setInterval(Marquee1, speed); //设置定时器
      //鼠标移上时清除定时器达到滚动停止的目的
      colee.onmouseover = function () {
        clearInterval(MyMar1);
      };
      //鼠标移开时重设定时器
      colee.onmouseout = function () {
        MyMar1 = setInterval(Marquee1, speed);
      };
    </script>
  </body>
</html>

然后我在vue3使用的时候，发现那个就算公式用回刚开始的就不会卡顿了，以及不用再使用定位属性，此处贴出组件代码，在父组件中对应插入<template #content>内容</template> 即可

<template>
  <div class="scroll-table" ref="colee">
    <div ref="colee1">
      <slot name="content"></slot>
    </div>
    <div ref="colee2">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, nextTick, onMounted, ref } from 'vue';

  export default defineComponent({
    setup() {
      const colee2 = ref<any>();
      const colee1 = ref<any>();
      const colee = ref<any>();

      onMounted(() => {
        nextTick(() => {
          const speed = 30;
          // colee2.value.innerHTML = colee1.value.innerHTML; //克隆colee1为colee2

          const Marquee1 = () => {
            //当滚动至colee1与colee2交界时
            if (colee2.value.offsetTop - colee.value.scrollTop <= 0) {
              colee.value.scrollTop -= colee1.value.offsetHeight; //colee跳到最顶端，很神奇的是在vue3中使用这一套却可以做到无缝
              // colee.value.scrollTop = 18; //colee跳到最顶端，使用上面的那个会卡掉第一个标签，p对应18基本做到无缝,这个的前提是容器需要有定位属性
            } else {
              colee.value.scrollTop++;
            }
          };

          let MyMar1 = setInterval(Marquee1, speed); //设置定时器
          //鼠标移上时清除定时器达到滚动停止的目的
          colee.value.onmouseover = function () {
            clearInterval(MyMar1);
          };
          //鼠标移开时重设定时器
          colee.value.onmouseout = function () {
            MyMar1 = setInterval(Marquee1, speed);
          };
        });
      });

      return {
        colee,
        colee1,
        colee2,
      };
    },
  });
</script>

<style lang="less" scoped>
  .scroll-table {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
</style>