Native Vue.js Implementation

For large-scale data visualization screens, a continuous vertical scrolling effect for list items is often required. This can be achieved using standard Vue reactivity without relying on third-party libraries.

1. Component Template Setup

Define the container structure and bind the necessary class and event handlers to control the animation state.

<!-- Scrolling Container -->
<div 
  ref="tickerContainer"
  :class="{ 'active-scroll': isScrolling }"
  @mouseenter="pauseScroll"
  @mouseleave="resumeScroll"
  class="ticker-box"
>
  <div 
    class="ticker-item" 
    v-for="(entry, idx) in displayData" 
    :key="idx"
  >
    {{ entry.label }}
  </div>
</div>

2. Styling with CSS Transitions

Apply a linear transition to the transform property to ensure smooth movement when the data shifts.

.active-scroll {
  transition: transform 0.5s linear;
}

.ticker-box {
  overflow: hidden;
  /* Additional styling for layout */
}

.ticker-item {
  height: 40px; /* Fixed height is critical for calculation */
  line-height: 40px;
}

3. Logic and State Management

Initialize the data properties and implement the interval logic. The core mechanism involves shifting the transform property up, waiting for the transition to finish, moving the first array item to the end, and then resetting the transform.

export default {
  data() {
    return {
      displayData: [
        { label: 'System Normal' },
        { label: 'Data Synced' },
        { label: 'User Login' },
        { label: 'Backup Complete' }
      ],
      isScrolling: false,
      scrollTimer: null
    };
  },
  mounted() {
    this.startTicker();
  },
  beforeDestroy() {
    this.clearTicker();
  },
  methods: {
    startTicker() {
      this.scrollTimer = setInterval(this.cycleItems, 2000);
    },
    clearTicker() {
      if (this.scrollTimer) clearInterval(this.scrollTimer);
    },
    cycleItems() {
      const container = this.$refs.tickerContainer;
      const itemHeight = 40; // Must match CSS height
      
      this.isScrolling = true;
      container.style.transform = `translateY(-${itemHeight}px)`;

      // Store reference to 'this' to avoid scope issues in setTimeout
      const self = this;
      
      setTimeout(() => {
        // Move the first item to the end of the array
        const firstItem = self.displayData.shift();
        self.displayData.push(firstItem);
        
        // Reset position instantly
        container.style.transform = 'translateY(0)';
        self.isScrolling = false;
      }, 500); // Duration must match CSS transition time
    },
    pauseScroll() {
      this.clearTicker();
    },
    resumeScroll() {
      this.startTicker();
    }
  }
};

4. Interaction Handling

The pauseScroll and resumeScroll methods are triggered by mouse events. When the cursor hovers over the list, the setInterval is cleared to allow users to read the content. Once the cursor leaves, the interval is restarted.