ScrollObserver API Reference

Props

The component doesn't accept any props.

Events

Event	Payload	Description
scrolledToEnd	-	Emitted when the observer element enters the viewport

Slots

The component doesn't provide any slots.

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <div class="scrollable-container">
    <div v-for="item in visibleItems" :key="item.id" class="item">
      {{ item.content }}
    </div>
    
    <OScrollObserver @scrolledToEnd="loadMoreItems" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { OScrollObserver } from 'your-component-library'

const allItems = ref([
  // Initial items
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  // ...more items
])

const visibleItems = ref(allItems.value.slice(0, 10))
const currentPage = ref(1)

const loadMoreItems = () => {
  // Simulate loading more items
  const nextPage = currentPage.value + 1
  const nextItems = allItems.value.slice(currentPage.value * 10, nextPage * 10)
  
  if (nextItems.length > 0) {
    visibleItems.value = [...visibleItems.value, ...nextItems]
    currentPage.value = nextPage
  }
}
</script>

<style scoped>
.scrollable-container {
  height: 400px;
  overflow-y: auto;
}

.item {
  padding: 16px;
  border-bottom: 1px solid #eee;
}
</style>

Integration with OTable

The ScrollObserver component is used internally by the OTable component to provide infinite scrolling functionality:

<template>
  <OTable
    :headers="headers"
    :tableData="visibleData"
    :enableInfiniteScroll="true"
    @scrolledToEndInTable="loadMoreData"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OTable } from 'your-component-library'

const headers = [
  { text: 'Name', key: 'name' },
  { text: 'Email', key: 'email' }
]

const allData = ref([
  // Initial data
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Smith', email: 'jane@example.com' },
  // ...more data
])

const visibleData = ref(allData.value.slice(0, 20))
const currentPage = ref(1)

const loadMoreData = () => {
  // Load next page of data
  const nextPage = currentPage.value + 1
  const nextItems = allData.value.slice(currentPage.value * 20, nextPage * 20)
  
  if (nextItems.length > 0) {
    visibleData.value = [...visibleData.value, ...nextItems]
    currentPage.value = nextPage
  }
}
</script>

Browser Support

This component uses the Intersection Observer API, which is supported in all modern browsers. For older browsers, you may need to include a polyfill.