快捷導(dǎo)航

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" /> 預(yù)警未來1小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到3mm</span><span class="timecol">12:00</span></div>
              <div class="warnItem"><span class="textcol"><span class="quan" /> 預(yù)警未來2小時，降雨量達(dá)到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) {
      // 獲取所有預(yù)警項目
      const warnItems = scrollContent.querySelectorAll('.warnItem')
      const itemCount = warnItems.length
      
      // 計算實際需要滾動的行數(shù)（考慮重復(fù)內(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秒
      
      // 設(shè)置CSS變量
      scrollContent.style.setProperty('--scroll-duration', `${scrollDuration}s`)
      
      console.log('預(yù)警項目數(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變量控制滾動速度，默認(rèn)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;
    }