vue3卡片垂直無限滾動方式
更新時間：2025年07月29日 09:33:17 作者：riyue666
使用CSS動畫實現(xiàn)DOM向上滾動,JS動態(tài)計算數(shù)據(jù)條數(shù)并實時調(diào)整滾動速度,確保在onMounted中調(diào)用以正確渲染DOM
vue3卡片垂直無限滾動
主要是利用css動畫向上滾動，js動態(tài)計算dom上有多少條數(shù)據(jù)實時更新滾動速度
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里調(diào)用確保dom已經(jīng)被渲染
onMounted(()=>{
// 計算滾動速度的函數(shù)
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
// 計算實際需要滾動的行數(shù)（考慮重復內(nèi)容）
const visibleHeight = tempInfo.clientHeight
const 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('預警項目數(shù)量:', itemCount, '可見項目:', visibleItems, '滾動時間:', scrollDuration + 's')
}
}
// 動態(tài)計算滾動速度，確保勻速滾動
setTimeout(calculateScrollSpeed, 1000)
// 監(jiān)聽窗口大小變化，重新計算滾動速度
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;
}總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天想要給vite項目,添加全局的scss變量文件引用,這樣我們在使用scss變量和函數(shù)的時候就不需要每個組件都取引用了,下面這篇文章主要給大家介紹了關于如何在vite初始化項目中安裝scss以及scss使用的相關資料,需要的朋友可以參考下2022-10-10
Nuxt.js是一個基于Vue.js的框架,結合Serverless架構,Nuxt.js可以讓你構建高度可擴展、成本效益高的無服務器應用,具有一定的參考價值,感興趣的可以了解一下2024-08-08
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)進度條式柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
日歷在很多地方都可以使用的到，本文主要介紹了vue3日歷控件的具體實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
sass是css的預處理器,擴展了css語言,提供了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等特性,有助于減少CSS重復的代碼,節(jié)省開發(fā)時間,下面這篇文章主要給大家介紹了關于vue3安裝配置sass的相關資料,需要的朋友可以參考下2022-12-12
Element DateTimePicker日期時間選擇器的使用示例
這篇文章主要介紹了Element DateTimePicker日期時間選擇器的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
vue 本地環(huán)境跨域請求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請求proxyTable的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用vue-aplayer插件時出現(xiàn)的問題的解決
這篇文章主要介紹了使用vue-aplayer插件時出現(xiàn)的問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue懸浮表單復合組件開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05