vue3-smart-scroll v2.0.1

vue3-smart-scroll

Vue 3 lightweight, easy to use scroll typescript component. Built with Intersection Observer api, allows tracking scroll items position, state, visibility, scroll direction, etc. Could be used for list lazy loading, infinite scroll implementation, viewed items marking and so on.

screencast-localhost_5173-2023.01.31-20_15_32.webm

Installation

# with npm
npm install vue3-smart-scroll

# with yarn
yarn add vue3-smart-scroll

Types

interface IIntersectionData {
  scrollDirection: 'up' | 'down',
  entries: IntersectionObserverEntry[],
}

Basic usage

<template>
  <smart-scroll
    :threshold="0.5"
    @intersect="intersectionHandler"
  >
    <div
      v-for="number in 17"
      class="item"
      :key="number"
    >
      Item: {{ number }}
    </div>
  </smart-scroll>
<template>
  
<script setup lang="ts">
import SmartScroll from 'vue3-smart-scroll'

const intersectionHandler = (data: IIntersectionData) => {
  data.entries.forEach((entry: IntersectionObserverEntry) => {
    if (entry.isIntersecting) {
      entry.target.setAttribute('data-is-visible', 'true')
    } else {
      entry.target.setAttribute('data-is-visible', 'false')
    }
  })
}
</script>
    
<style scoped>
  #smartScrollContainer {
    width: 300px;
    border: solid;
    height: 350px;
  }
     
  .item {
    padding: 2rem;
    font-size: 2rem;
  }
    
  *[data-is-visible="true"] {
    background: #FDD77D;
    color: #644D12;
    transition: background-color 1s;
  }
  *[data-is-visible="false"] {
    background: #B08620;
    color: #FEF0CD;
    transition: background-color 1s;
  }
</style>

Props

Events