Vue3 Seamless Scroll

https://github.com/xfy520/vue3-seamless-scroll
Admin
A newly upgraded seamless scrolling component for Vue 3, using a virtual list to support efficient...
Tokens:7,277
Snippets:40
Trust Score:6.9
License:MIT
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Vue3 Seamless Scroll via NPM or Yarn

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Installs the vue3-seamless-scroll package into your project using either npm or yarn. This is a prerequisite step before you can import and use the component in your Vue 3 application.

```bash
# Using npm
npm install vue3-seamless-scroll --save

# Using yarn
yarn add vue3-seamless-scroll
```

--------------------------------

### Configure Animation Delay in Vue.js

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Sets an initial delay before the scrolling animation begins using the 'delay' property. This property takes a value in milliseconds. This example configures a 3-second delay before the scrolling starts.

```vue
<template>
  <div class="delayed-scroll-container">
    <VerticalScroll :list="delayedData" :delay="3000">
      <template v-slot="{ data }">
        <div class="delayed-item">{{ data.content }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const delayedData = ref(
      Array.from({ length: 40 }, (_, i) => ({
        id: i + 1,
        content: `Item with delayed start ${i + 1}`
      }))
    );
    return { delayedData };
  }
});
</script>

<style scoped>
.delayed-scroll-container {
  overflow: hidden;
  height: 300px;
}
.delayed-item {
  width: 100%;
  line-height: 30px;
}
</style>
```

--------------------------------

### Dynamically Add Items to Scroll List with 'add' Method in Vue.js

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Demonstrates how to programmatically add items to the scrolling list at a specified position using the 'add' method. The 'add' method takes the index, an array of items to add, and an optional callback function. This example adds a new item at the 5th position.

```vue
<template>
  <div class="add-data-container">
    <button @click="addItem">Add Item at Position 5</button>
    <VerticalScroll :list="dynamicList" ref="scrollRef">
      <template v-slot="{ data }">
        <div class="dynamic-item">{{ data.name }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const dynamicList = ref(
      Array.from({ length: 20 }, (_, i) => ({
        id: i + 1,
        name: `Initial item ${i + 1}`
      }))
    );
    const scrollRef = ref(null);

    const addItem = () => {
      const newItem = {
        id: Date.now(),
        name: `New item added at ${new Date().toLocaleTimeString()}`
      };
      scrollRef.value.add(5, [newItem], (updatedList) => {
        console.log('List after addition:', updatedList);
      });
    };

    return { dynamicList, scrollRef, addItem };
  }
});
</script>

<style scoped>
.add-data-container {
  overflow: hidden;
  height: 300px;
}
.dynamic-item {
  width: 100%;
  line-height: 30px;
}
button {
  margin-bottom: 10px;
  padding: 8px 16px;
}
</style>
```

--------------------------------

### Global Registration of Vue3 Seamless Scroll Component

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Globally registers the vue3-seamless-scroll component, making it available throughout the entire Vue 3 application. This method requires importing the plugin and using `app.use()` during the application setup. It simplifies component usage by eliminating the need for local imports in every file.

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";

const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');
```

--------------------------------

### Horizontal Scrolling Implementation with HorizontalScroll

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Demonstrates horizontal scrolling using the `HorizontalScroll` component with the direction set to 'left'. This setup is suitable for displaying items in a horizontal, continuous flow. It utilizes a `list` prop for data and a scoped slot for item rendering, requiring specific CSS for layout and orientation.

```vue
<template>
  <div class="horizontal-scroll-container">
    <HorizontalScroll :list="scrollData" direction="left" style="display: flex;">
      <template v-slot="{ data }">
        <div class="horizontal-item">
          {{ data.title }}
        </div>
      </template>
    </HorizontalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { HorizontalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { HorizontalScroll },
  setup() {
    const scrollData = ref(
      Array.from({ length: 50 }, (_, i) => ({
        id: i + 1,
        title: `Horizontal Item ${i + 1}`
      }))
    );
    return { scrollData };
  }
});
</script>

<style scoped>
.horizontal-scroll-container {
  overflow: hidden;
  height: 200px;
}
.horizontal-item {
  height: 200px;
  writing-mode: vertical-lr;
  text-orientation: upright;
  line-height: 30px;
  display: inline-block;
}
</style>
```

--------------------------------

### Start/Stop Scroll Control with v-model in Vue 3

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Enables programmatic control over the scroll animation's play/pause state using v-model binding. A button toggles the `isScrolling` ref, which is bound to the VerticalScroll component, effectively starting or stopping the scroll.

```vue
<template>
  <div class="control-scroll-container">
    <button @click="isScrolling = !isScrolling">
      {{ isScrolling ? 'Pause' : 'Start' }} Scrolling
    </button>
    <VerticalScroll :list="controlledList" v-model="isScrolling">
      <template v-slot="{ data }">
        <div class="controlled-item">{{ data.name }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const controlledList = ref(
      Array.from({ length: 40 }, (_, i) => ({
        id: i + 1,
        name: `Controllable item ${i + 1}`
      }))
    );
    const isScrolling = ref(true);

    return { controlledList, isScrolling };
  }
});
</script>

<style scoped>
.control-scroll-container {
  overflow: hidden;
  height: 300px;
}
.controlled-item {
  width: 100%;
  line-height: 30px;
}
button {
  margin-bottom: 10px;
  padding: 8px 16px;
}
</style>
```

--------------------------------

### Customize Animation Easing in Vue.js

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Customizes the animation smoothness of the scrolling list by applying easing functions. The 'ease' property accepts standard CSS easing functions or Bezier curves. This example uses 'ease-in-out' for a smooth transition effect.

```vue
<template>
  <div class="easing-scroll-container">
    <VerticalScroll :list="smoothData" ease="ease-in-out">
      <template v-slot="{ data }">
        <div class="smooth-item">{{ data.name }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const smoothData = ref(
      Array.from({ length: 50 }, (_, i) => ({
        id: i + 1,
        name: `Smooth animation item ${i + 1}`
      }))
    );
    return { smoothData };
  }
});
</script>

<style scoped>
.easing-scroll-container {
  overflow: hidden;
  height: 280px;
}
.smooth-item {
  width: 100%;
  line-height: 35px;
}
</style>
```

--------------------------------

### Configure Scroll Speed with 'step' in Vue.js

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Adjusts the scrolling speed of the vertical list by modifying the 'step' property. A higher 'step' value increases the pixel movement per animation frame, resulting in faster scrolling. This example uses a 'step' of 2 for faster movement.

```vue
<template>
  <div class="custom-speed-container">
    <VerticalScroll :list="fastScrollData" :step="2">
      <template v-slot="{ data }">
        <div class="fast-item">{{ data.text }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const fastScrollData = ref(
      Array.from({ length: 80 }, (_, i) => ({
        id: i + 1,
        text: `Fast scrolling item ${i + 1}`
      }))
    );
    return { fastScrollData };
  }
});
</script>

<style scoped>
.custom-speed-container {
  overflow: hidden;
  height: 300px;
}
.fast-item {
  width: 100%;
  line-height: 30px;
}
</style>
```

--------------------------------

### Remove Items from Vue 3 Seamless Scroll List

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Demonstrates how to remove a specified number of items from the scrolling list starting at a given index. This function is useful for dynamic list management where items are no longer needed. It utilizes the `remove` method provided by the `VerticalScroll` component.

```vue
<template>
  <div class="remove-data-container">
    <button @click="removeItems">Remove 3 Items from Position 2</button>
    <VerticalScroll :list="removableList" ref="scrollRef">
      <template v-slot="{ data }">
        <div class="removable-item">{{ data.label }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const removableList = ref(
      Array.from({ length: 30 }, (_, i) => ({
        id: i + 1,
        label: `Removable item ${i + 1}`
      }))
    );
    const scrollRef = ref(null);

    const removeItems = () => {
      scrollRef.value.remove(2, 3, (updatedList) => {
        console.log('List after removal:', updatedList);
      });
    };

    return { removableList, scrollRef, removeItems };
  }
});
</script>

<style scoped>
.remove-data-container {
  overflow: hidden;
  height: 300px;
}
.removable-item {
  width: 100%;
  line-height: 30px;
}
button {
  margin-bottom: 10px;
  padding: 8px 16px;
}
</style>
```

--------------------------------

### Basic Vertical Scrolling Implementation with VerticalScroll

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Implements a basic seamless vertical scrolling list using the `VerticalScroll` component. It displays a list of items that automatically scroll upwards. The component takes a `list` prop for the data and uses a slot to render each item. Requires CSS for container styling and item appearance.

```vue
<template>
  <div class="vertical-scroll-container">
    <VerticalScroll :list="scrollData">
      <template v-slot="{ data, index }">
        <div class="scroll-item">
          {{ data.name }}
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const scrollData = ref(
      Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `Item ${i + 1}`
      }))
    );
    return { scrollData };
  }
});
</script>

<style scoped>
.vertical-scroll-container {
  overflow: hidden;
  height: 300px;
}
.scroll-item {
  width: 100%;
  display: block;
  line-height: 30px;
}
</style>
```

--------------------------------

### Infinite Scroll with Pagination using Offset Event in Vue 3

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Implements infinite scrolling with dynamic data loading by listening to the 'offset' event. This allows for pagination and loading more items as the user scrolls. It manages a list of items and dynamically adds new items while also removing older items to prevent memory issues when the list exceeds a certain size.

```vue
<template>
  <div class="infinite-scroll-container">
    <VerticalScroll
      :list="infiniteList"
      ref="scrollRef"
      @offset="handleOffset">
      <template v-slot="{ data }">
        <div class="infinite-item">
          {{ data.title }} - Page {{ data.page }}
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const infiniteList = ref(
      Array.from({ length: 25 }, (_, i) => ({
        id: i + 1,
        title: `Initial item ${i + 1}`,
        page: 1
      }))
    );
    const scrollRef = ref(null);
    let currentPage = 1;

    const handleOffset = (bufferSize, targetList) => {
      currentPage++;
      const newItems = Array.from({ length: bufferSize }, (_, i) => ({
        id: Date.now() + i,
        title: `Loaded item ${targetList.length + i + 1}`,
        page: currentPage
      }));

      scrollRef.value.add(targetList.length, newItems);

      // Keep only last 100 items to prevent memory issues
      if (targetList.length >= 100) {
        scrollRef.value.remove(0, 50);
      }
    };

    return { infiniteList, scrollRef, handleOffset };
  }
});
</script>

<style scoped>
.infinite-scroll-container {
  overflow: hidden;
  height: 350px;
}
.infinite-item {
  width: 100%;
  line-height: 35px;
  padding: 5px 10px;
}
</style>
```

--------------------------------

### Custom Visible Item Count in Vue 3 Seamless Scroll

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Demonstrates how to explicitly set the number of items visible at any given time using the `visibleCount` prop. This is useful for optimizing rendering, especially when all items have consistent heights, ensuring a predictable scroll experience.

```vue
<template>
  <div class="visible-count-container">
    <VerticalScroll :list="countedList" :visibleCount="10">
      <template v-slot="{ data }">
        <div class="counted-item">{{ data.label }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const countedList = ref(
      Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        label: `Item with fixed height ${i + 1}`
      }))
    );
    return { countedList };
  }
});
</script>

<style scoped>
.visible-count-container {
  overflow: hidden;
  height: 300px;
}
.counted-item {
  width: 100%;
  line-height: 30px;
  height: 30px;
}
</style>
```

--------------------------------

### Local Registration of Vue3 Seamless Scroll Components

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Locally registers specific scrolling components (Vue3SeamlessScroll, VerticalScroll, HorizontalScroll) within a Vue component. This approach is useful for managing dependencies and only including necessary components, preventing global pollution. It requires importing the desired components and adding them to the `components` option.

```vue
<script>
import { defineComponent } from "vue";
import { Vue3SeamlessScroll, VerticalScroll, HorizontalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: {
    Vue3SeamlessScroll,  // Universal component for all directions
    VerticalScroll,      // Optimized for vertical scrolling
    HorizontalScroll     // Optimized for horizontal scrolling
  }
})
</script>
```

--------------------------------

### Vue 3 Universal Component: Four-Directional Scrolling

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Demonstrates using the Vue3SeamlessScroll component for scrolling content in any direction (up, down, left, or right) by setting the 'direction' prop. It requires the Vue3SeamlessScroll component and a list of items to display.

```vue
<template>
  <div class="scroll-wrapper">
    <vue3-seamless-scroll :list="items" direction="down">
      <template v-slot="{ data, index }">
        <div class="item">
          <span>{{ index + 1 }}. {{ data.content }}</span>
        </div>
      </template>
    </vue3-seamless-scroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { Vue3SeamlessScroll },
  setup() {
    const items = ref(
      Array.from({ length: 200 }, (_, i) => ({
        id: i + 1,
        content: `Scrolling content item ${i + 1}`
      }))
    );
    return { items };
  }
});
</script>

<style scoped>
.scroll-wrapper {
  overflow: hidden;
  height: 400px;
}
.item {
  width: 100%;
  display: block;
  line-height: 40px;
  padding: 5px;
}
</style>
```

--------------------------------

### Large Dataset Performance with Virtual Scrolling in Vue 3

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Optimizes performance for handling extremely large datasets by leveraging virtual list rendering. The `VerticalScroll` component efficiently renders only the visible items, providing a smooth scrolling experience even with thousands of data points.

```vue
<template>
  <div class="large-dataset-container">
    <p>Scrolling through {{ largeDataset.length }} items smoothly</p>
    <VerticalScroll :list="largeDataset" :step="1">
      <template v-slot="{ data, index }">
        <div class="large-item">
          {{ index + 1 }}. {{ data.name }} - {{ data.timestamp }}
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const largeDataset = ref(
      Array.from({ length: 10000 }, (_, i) => ({
        id: i + 1,
        name: `Large dataset item ${i + 1}`,
        timestamp: new Date(Date.now() + i * 1000).toISOString()
      }))
    );
    return { largeDataset };
  }
});
</script>

<style scoped>
.large-dataset-container {
  overflow: hidden;
  height: 400px;
}
.large-item {
  width: 100%;
  line-height: 30px;
  padding: 2px 5px;
}
</style>
```

--------------------------------

### Reset Vue 3 Seamless Scroll on Container Resize

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Explains how to reset the component's internal state when the dimensions of its container change. This ensures the scrolling behavior remains correct after resizing. The `reset` method is called, typically within a `setTimeout` to allow the DOM to update after the size change.

```vue
<template>
  <div class="reset-container">
    <button @click="changeSize">Change Container Size</button>
    <div :class="['resize-wrapper', { expanded }]">
      <VerticalScroll :list="resetList" ref="scrollRef">
        <template v-slot="{ data }">
          <div class="reset-item">{{ data.text }}</div>
        </template>
      </VerticalScroll>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const resetList = ref(
      Array.from({ length: 60 }, (_, i) => ({
        id: i + 1,
        text: `Resizable container item ${i + 1}`
      }))
    );
    const scrollRef = ref(null);
    const expanded = ref(false);

    const changeSize = () => {
      expanded.value = !expanded.value;
      setTimeout(() => {
        scrollRef.value.reset();
      }, 100);
    };

    return { resetList, scrollRef, expanded, changeSize };
  }
});
</script>

<style scoped>
.resize-wrapper {
  overflow: hidden;
  height: 300px;
  transition: height 0.3s;
}
.resize-wrapper.expanded {
  height: 500px;
}
.reset-item {
  width: 100%;
  line-height: 30px;
}
button {
  margin-bottom: 10px;
  padding: 8px 16px;
}
</style>
```

--------------------------------

### Update Item in Vue 3 Seamless Scroll List

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Illustrates how to update a specific item in the scrolling list at a given index. This is useful for reflecting real-time changes to data displayed in the list. The `update` method of the `VerticalScroll` component is used for this purpose.

```vue
<template>
  <div class="update-data-container">
    <button @click="updateItem">Update Item at Position 10</button>
    <VerticalScroll :list="updatableList" ref="scrollRef">
      <template v-slot="{ data }">
        <div class="updatable-item">{{ data.description }}</div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const updatableList = ref(
      Array.from({ length: 50 }, (_, i) => ({
        id: i + 1,
        description: `Original item ${i + 1}`
      }))
    );
    const scrollRef = ref(null);

    const updateItem = () => {
      const updatedItem = {
        id: Date.now(),
        description: `Updated at ${new Date().toLocaleTimeString()}`
      };
      scrollRef.value.update(10, updatedItem, (updatedList) => {
        console.log('List after update:', updatedList);
      });
    };

    return { updatableList, scrollRef, updateItem };
  }
});
</script>

<style scoped>
.update-data-container {
  overflow: hidden;
  height: 300px;
}
.updatable-item {
  width: 100%;
  line-height: 30px;
}
button {
  margin-bottom: 10px;
  padding: 8px 16px;
}
</style>
```

--------------------------------

### Vue 3 Vertical Scroll Component: Mouse Wheel Scrolling with Hover

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Combines hover pause with mouse wheel scrolling functionality. Users can pause the scrolling on hover and then use their mouse wheel to manually navigate through the content. This requires the VerticalScroll component and a list of data items.

```vue
<template>
  <div class="wheel-scroll-container">
    <VerticalScroll :list="dataList" :hover="true" :wheel="true">
      <template v-slot="{ data }">
        <div class="data-row">
          {{ data.label }}: {{ data.value }}
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const dataList = ref(
      Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        label: `Data Point ${i + 1}`,
        value: Math.floor(Math.random() * 1000)
      }))
    );
    return { dataList };
  }
});
</script>

<style scoped>
.wheel-scroll-container {
  overflow: hidden;
  height: 350px;
}
.data-row {
  width: 100%;
  line-height: 35px;
  padding: 5px 15px;
}
</style>
```

--------------------------------

### Vue 3 Vertical Scroll Component: Single-Step Scrolling

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Enables single-step scrolling where content moves one item at a time, with a configurable pause duration between steps. This is useful for announcements or ticker-like displays. It requires the VerticalScroll component and a list of announcements.

```vue
<template>
  <div class="single-step-container">
    <VerticalScroll :list="announcements" :singleLine="true" :singleWaitTime="2000">
      <template v-slot="{ data }">
        <div class="announcement">
          <strong>{{ data.title }}</strong>
          <span>{{ data.message }}</span>
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const announcements = ref([
      { id: 1, title: "Announcement 1", message: "Important update about service" },
      { id: 2, title: "Announcement 2", message: "New feature release coming soon" },
      { id: 3, title: "Announcement 3", message: "Scheduled maintenance notice" },
      { id: 4, title: "Announcement 4", message: "Security update information" }
    ]);
    return { announcements };
  }
});
</script>

<style scoped>
.single-step-container {
  overflow: hidden;
  height: 80px;
}
.announcement {
  width: 100%;
  line-height: 40px;
  padding: 10px;
}
</style>
```

--------------------------------

### Vue 3 Vertical Scroll Component: Hover Pause

Source: https://context7.com/xfy520/vue3-seamless-scroll/llms.txt

Implements a vertical scrolling list with hover pause functionality using the VerticalScroll component. When the mouse hovers over the scrollable area, the scrolling pauses, allowing users to read the content. It requires the VerticalScroll component and a list of news items.

```vue
<template>
  <div class="hover-scroll-container">
    <VerticalScroll :list="newsItems" :hover="true">
      <template v-slot="{ data }">
        <div class="news-item">
          <h4>{{ data.title }}</h4>
          <p>{{ data.description }}</p>
        </div>
      </template>
    </VerticalScroll>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { VerticalScroll } from "vue3-seamless-scroll";

export default defineComponent({
  components: { VerticalScroll },
  setup() {
    const newsItems = ref([
      { id: 1, title: "Breaking News 1", description: "Description for news 1" },
      { id: 2, title: "Breaking News 2", description: "Description for news 2" },
      { id: 3, title: "Breaking News 3", description: "Description for news 3" },
      { id: 4, title: "Breaking News 4", description: "Description for news 4" },
      { id: 5, title: "Breaking News 5", description: "Description for news 5" }
    ]);
    return { newsItems };
  }
});
</script>

<style scoped>
.hover-scroll-container {
  overflow: hidden;
  height: 300px;
}
.news-item {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
```
Tokens:
Raw