JS实现新闻列表循环无限播放，移入暂停，移出继续播放。

实现新闻循环滚动列表

逻辑：当窗口高度小于内容高度时，窗口的scrollTop缓慢增加 ，内容由下向上滚动，当内容底部与窗口底部重合停止滚动；这是第一遍滚动
如果把数据复制两份，就会造成一种首尾相连循环滚动的假象，当第二遍的内容开头与 窗口的 scrollTop 重合，这时候设置scrollTop = 0 就会实现循环无限滚动

具体实现实现：

1、创建个窗口 并设置窗口的可视高度 溢出隐藏

<div id="window" class="window"> <div>

.window{
	border: 1px solid #00ffe1;
    height: 200px;
    overflow: hidden;
}
.td {
	display: flex;
}

2、 创建一个容器，并填塞内容

<div id="window" class="window"> 
	<div id="container">
    	<div class="td" v-for="(item, index) in tableData" :key="index">
        	<div class="key">{{ item.name }}</div>
        	<div class="key">{{ item.age }}</div>
        	<div class="key">{{ item.address }}</div>
    	</div>
	</div>
<div>

/** 表  */
const tableData = ref([])

/** 表 新增30条数据 */
tableData.value = Array.from({ length: 30 }, (_, i) => {
  return { name: `name${i}}`, age: `age${i}}`, address: `address${i}}` }
})
/** 自己 copy自己  */  // 这个上面有解释，就是为了造成首尾相连的假象,具体你可以复制最下面完整代码去掉这段 比对一下就明白效果了。
tableData.value = tableData.value.concat(tableData.value)

// 样式
.window{
	border: 1px solid #00ffe1;
    height: 200px;
    overflow: hidden;
}
.td {
	display: flex;
}
.key {
   width: 100px;
   height: 20px;
   text-align: center;
}

3、实现内容的滚动

  /** 获取 展示窗口 dom */
  const element = document.getElementById('window')

  /** 获取 展示内容 dom */
  const container = document.getElementById('container')
  /** 获取 展示内容的高度 / 2 */
  const boxHeight = Number(container.clientHeight) / 2
  
  let interval = setInterval(() => {
    element.scrollTop += 1
    /** 如果 展示窗口的 scrollTop  大于 展示内容的高度  重置scrollTop */
    if (boxHeight <= element.scrollTop) {
      element.scrollTop = 0
    }
  }, 10)

4、增加移入暂停 移出播放

  let current
  /** 移入事件 */
  element.addEventListener('mouseenter', () => {
    // 保存当前 的 scrollTop 的高度
    current = element.scrollTop
    // 清除定时器
    clearInterval(interval)
    // 清除interval变量，以便可以重新设置
    interval = null
  })

  // 移出事件
  element.addEventListener('mouseleave', () => {
    // 重新设置开始时的 scrollTop 高度
    element.scrollTop = current
    // 重新启动定时器
    interval = setInterval(() => {
      element.scrollTop += 1
      if (boxHeight <= element.scrollTop) {
        element.scrollTop = 0
      }
    }, 10)
  })

完整代码

<template>
  <div class="table">
    <div class="th">
      <div class="key">姓名</div>
      <div class="key">年龄</div>
      <div class="key">地址</div>
    </div>
    <div id="window" class="window">
      <div id="container">
        <div class="td" v-for="(item, index) in tableData" :key="index">
          <div class="key">{{ item.name }}</div>
          <div class="key">{{ item.age }}</div>
          <div class="key">{{ item.address }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

/** 表  */
const tableData = ref([])

/** 表 新增30条数据 */
tableData.value = Array.from({ length: 30 }, (_, i) => {
  return { name: `name${i}}`, age: `age${i}}`, address: `address${i}}` }
})
/**   */
tableData.value = tableData.value.concat(tableData.value)

onMounted(() => {
  /** 获取 展示窗口 dom */
  const element = document.getElementById('window')

  /** 获取 展示内容 dom */
  const container = document.getElementById('container')
  /** 获取 展示内容的高度 / 2 */
  const boxHeight = Number(container.clientHeight) / 2

  let interval = setInterval(() => {
    element.scrollTop += 1
    /** 如果 展示窗口的 scrollTop  大于 展示内容的高度  重置scrollTop */
    if (boxHeight <= element.scrollTop) {
      element.scrollTop = 0
    }
  }, 10)

  let current

  /** 移入事件 */
  element.addEventListener('mouseenter', () => {
    // 保存当前 的 scrollTop 的高度
    current = element.scrollTop
    // 清除定时器
    clearInterval(interval)
    // 清除interval变量，以便可以重新设置
    interval = null
  })

  // 移出事件
  element.addEventListener('mouseleave', () => {
    // 重新设置开始时的 scrollTop 高度
    element.scrollTop = current
    // 重新启动定时器
    interval = setInterval(() => {
      element.scrollTop += 1
      if (boxHeight <= element.scrollTop) {
        element.scrollTop = 0
      }
    }, 10)
  })
})
</script>

<style lang="less" scoped>
.table {
  width: 300px;

  .th {
    display: flex;
  }
  .window {
    border: 1px solid #00ffe1;
    height: 200px;
    overflow: hidden;

    .td {
      display: flex;
    }
  }
  .key {
    width: 100px;
    height: 20px;
    text-align: center;
  }
}
</style>

创作不易 ^_ 点赞珍惜
– END –