Bubbles
  • English

      • @bubblesjs/vue-infinite-scroll

      A Vue 3 infinite scroll component that creates a seamless auto-scrolling effect for content lists, perfect for news tickers, announcement boards, and data displays.

      Features

      • 🔄 Seamless Loop: Smooth infinite scrolling animation
      • ⏸️ Hover Pause: Automatically pauses on mouse hover
      • ⚡ Lightweight: Minimal dependencies, pure CSS animation
      • 🎛️ Configurable: Adjustable animation speed
      • 📱 Responsive: Adapts to container size automatically

      Installation

      pnpm
      npm
      yarn
      pnpm add @bubblesjs/vue-infinite-scroll

      Quick Start

      Basic Usage

      <template>
  <div style="height: 300px;">
    <InfiniteScoll :animation-time="20">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </InfiniteScoll>
  </div>
</template>

<script setup lang="ts">
import { InfiniteScoll } from '@bubblesjs/vue-infinite-scroll'

const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
  // ... more items
]
</script>

      Table Scrolling Example

      <template>
  <div style="height: 400px;">
    <InfiniteScoll :animation-time="15">
      <div v-for="row in tableData" :key="row.id" class="table-row">
        <div class="cell" style="width: 60px">{{ row.id }}</div>
        <div class="cell" style="width: 80px">{{ row.name }}</div>
        <div class="cell" style="width: 60px">{{ row.age }}</div>
        <div class="cell" style="width: 80px">{{ row.city }}</div>
        <div class="cell" style="width: 160px">{{ row.email }}</div>
      </div>
    </InfiniteScoll>
  </div>
</template>

<script setup lang="ts">
import { InfiniteScoll } from '@bubblesjs/vue-infinite-scroll'

const tableData = [
  { id: 1, name: 'John', age: 28, city: 'New York', email: 'john@example.com' },
  { id: 2, name: 'Jane', age: 32, city: 'London', email: 'jane@example.com' },
  // ... more data
]
</script>

<style scoped>
.table-row {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}
.cell {
  padding: 0 8px;
}
</style>

      Props

      PropTypeDefaultDescription
      animationTimenumber15Animation duration in seconds (lower = faster)

      How It Works

      The component works by:

      1. Rendering your content in a scrollable container
      2. Duplicating the content to create a seamless loop
      3. Using CSS animation to scroll the content upward
      4. Pausing the animation when the user hovers over the content

      The animation only activates when the content height exceeds the container height.

      Styling

      The component uses minimal styling. You can customize the appearance of your content using your own CSS:

      <template>
  <div class="scroll-container">
    <InfiniteScoll :animation-time="20">
      <div v-for="item in items" :key="item.id" class="scroll-item">
        {{ item.text }}
      </div>
    </InfiniteScoll>
  </div>
</template>

<style scoped>
.scroll-container {
  height: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.scroll-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.scroll-item:hover {
  background-color: #f5f5f5;
}
</style>

      Use Cases

      • News ticker / announcement boards
      • Stock price displays
      • Live data feeds
      • Leaderboards
      • Social media feeds
      • Event logs