vue3卡片垂直无限滚动
主要是利用css动画向上滚动，js动态计算dom上有多少条数据实时更新滚动速度
dom
<div class="temp_info"><div class="scroll-wrapper"><div class="scroll-content"><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来1小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div><div class="warnItem"><span class="textcol"><span class="quan" /> 预警未来2小时，降雨量达到3mm</span><span class="timecol">12:00</span></div></div></div></div>js 要在onMounted里调用确保dom已经被渲染
onMounted(()=>{// 计算滚动速度的函数const calculateScrollSpeed = () => {const scrollContent = document.querySelector('.scroll-content')const tempInfo = document.querySelector('.temp_info')if (scrollContent && tempInfo) {// 获取所有预警项目const warnItems = scrollContent.querySelectorAll('.warnItem')const itemCount = warnItems.length// 计算实际需要滚动的行数（考虑重复内容）const visibleHeight = tempInfo.clientHeightconst itemHeight = 30 // 每个项目的高度const visibleItems = Math.ceil(visibleHeight / itemHeight)const actualScrollItems = itemCount - visibleItems// 计算滚动时间：每个项目1.5秒，确保匀速且不会太快const scrollDuration = Math.max(actualScrollItems * 1.5, 10) // 最少10秒// 设置CSS变量scrollContent.style.setProperty('--scroll-duration', `${scrollDuration}s`)console.log('预警项目数量:', itemCount, '可见项目:', visibleItems, '滚动时间:', scrollDuration + 's')}}// 动态计算滚动速度，确保匀速滚动setTimeout(calculateScrollSpeed, 1000)// 监听窗口大小变化，重新计算滚动速度window.addEventListener('resize', calculateScrollSpeed)
})css
.temp_info {box-sizing: border-box;width: 100%;height: 60px;background: rgba(1, 60, 93, 0.36);border-radius: 3px;border: 1px solid #1a3f58;padding-left: 15px;padding-right: 10px;overflow: hidden;position: relative;// 添加渐变遮罩&::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 100%;background: linear-gradient(to bottom, rgba(1, 60, 93, 0.8) 0%, transparent 15%, transparent 85%, rgba(1, 60, 93, 0.8) 100%);pointer-events: none;z-index: 2;}.scroll-wrapper {height: 100%;overflow: hidden;}.scroll-content {// 使用CSS变量控制滚动速度，默认20秒animation: scrollUp var(--scroll-duration, 20s) linear infinite;will-change: transform;position: relative;z-index: 1;&:hover {animation-play-state: paused;}}.warnItem {display: flex;justify-content: space-between;line-height: 30px;.textcol {font-weight: 400;font-size: 14px;color: #7dbaed;}.quan {display: inline-block;width: 7px;height: 7px;background: rgba(34, 186, 255, 0.36);border-radius: 50%;border: 1px solid #22baff;margin-right: 6px;}.timecol {font-weight: 400;font-size: 14px;color: #a3e5ff;}}}@keyframes scrollUp {0% {transform: translateY(0);}100% {transform: translateY(-50%);}}// 确保动画能够正常工作.scroll-content {will-change: transform;}