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

NAME	TYPE	DEFAULT	DESCRIPTION
id?	String	smartScrollContainer	Main block id. Component starts tracking this block and its children for intersections
scrollDelay? (ms)	Number	0	Delay for intersect event calback function in milliseconds
checkViewing?	Boolean	false	If true, component stop observing item in main block after first intersection. Improves performance. Can be used with message/notifications lists, for example, when you need to check item visibility only once
threshold?	Number, Number[]	0	Intersection Observer constructor options param
rootMargin?	String	" "	Intersection Observer constructor options param

Events

NAME	ARGS	ARGS TYPE	DESCRIPTION
intersect	data	IIntersectionData	Fires when tracking items intersecting with main block