您的位置:首页 > 编程学习 > > 正文

vue控制div滚动条(vue3实现CSS无限无缝滚动效果)

更多 时间:2021-10-21 07:39:25 类别:编程学习 浏览量:2434

vue控制div滚动条

vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下

template

双层li嵌套,进行隐藏滚动显示

  • <li class="list-container">
      <li class="marquee" id="carList">
        <template v-for="(item, index) in dataMap.list" :key="index">
          <li class="list-item">
            <li class="item-name text-overflow">{{ item.name }}</li>
            <li class="item-road text-overflow">{{ item.road }}</li>
          </li>
        </template>
      </li>
    </li>
    
  • script

    复制dom元素中的内容,衔接上一次滚动效果

  • export default defineComponent({
      setup() {
        const dataMap = reactive({
          list: [
            { name: '浙A89268', road: '游8路', status: 0 },
            { name: '浙A89268', road: '游8路', status: 0 },
            { name: '浙A89268', road: '游8路', status: 1 },
            { name: '浙A89268', road: '游8路', status: 0 },
            { name: '浙A89268', road: '游8路', status: 1 },
            { name: '浙A89268', road: '游1路', status: 0 },
          ],
        });
        onMounted(() => {
          const marquee = document.getElementById('carList');
          marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
        });
      }
    })
    
  • style

    CSS手写动画效果

  • .list-container {
      width: 720px;
      height: 170px;
      margin-left: 13px;
      overflow: hidden;
      position: relative;
    }
    //无限滚动
    .marquee {
      //animation-delay: -5s;
      animation: marquee 15s linear infinite;
    }
    .marquee:hover {
      animation-play-state: paused;
    }
    @keyframes marquee {
      0% {
        transform: translateY(0%);
      }
      100% {
        transform: translateY(-51%); //这里不是-100%!
      }
    }
    
  • vue控制div滚动条(vue3实现CSS无限无缝滚动效果)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue3 滚动
    您可能感兴趣