简单的无缝滚动

最新推荐文章于 2023-07-27 15:08:21 发布

weixin_30257433

最新推荐文章于 2023-07-27 15:08:21 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuyan1/p/10773986.html

本文介绍了一个使用HTML和JavaScript实现的无限滚动列表效果。通过复制列表内容并使用定时器控制滚动，实现了平滑的向上滚动效果。当鼠标悬停或触摸屏幕时，滚动会暂停，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div id="box">
      <ul id="list1" ref="list1">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
      </ul>
      <ul id="list2" ref="list2"></ul>
    </div>  
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted () {
      this.moveFun()
    },
    methods: {
      moveFun() {
        let box = document.getElementById("box")
        let list1 = document.getElementById("list1")
        let list2 = document.getElementById("list2")

        list2.innerHTML = list1.innerHTML;

        function scrollUp() {
          if(box.scrollTop >= list1.offsetHeight) {
            box.scrollTop = 0;
          } else {
            box.scrollTop++;
          }
        }

        let scrollMove = setInterval(scrollUp, 300)

        //鼠标经过时，滚动停止
          box.onmouseover=function(){
              clearInterval(scrollMove)
              console.log('over')
          }
          box.touchstart=function(){
              clearInterval(scrollMove)
              console.log('touch start')
          }

          //鼠标离开时，滚动继续
          box.onmouseout=function(){
              scrollMove=setInterval(scrollUp,300);
          }
          box.touchend=function(){
              scrollMove=setInterval(scrollUp,300);
          }
      }
    }
  }
</script>

<style lang="scss" scoped>
ul,li{list-style: none;}
#box{ width: 200px; height:90px; overflow:hidden; border:1px solid red;}
</style>