Scrollable

Name: PXD UI Component Library
Author: libondev

The container can be scrolled, and the scroll bar or container effect can be customized.

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque facere ea, hic incidunt necessitatibus.

<template>
  <PScrollable class="w-100 max-w-full h-100 border rounded-md">
    <div class="p-4 w-screen h-screen bg-background-100 rounded-inherit">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias
      debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque
      facere ea, hic incidunt necessitatibus.
    </div>
  </PScrollable>
</template>

Bottom event

<script setup>
import { ref } from 'vue'

// The end event will not be triggered repeatedly when loading = true
const isLoading = ref(false)

// Start triggering the end event when it is far from the bottom
const bottomThreshold = 50

let resetLoadingTimer = 0

function onScrollToEnd(dir, ev) {
  console.log('to end, direction: ' + dir)

  clearTimeout(resetLoadingTimer)
  isLoading.value = true
  resetLoadingTimer = setTimeout(() => {
    isLoading.value = false
  }, 1000)
}
</script>

<template>
  <PScrollable
    class="w-100 max-w-full h-100 border rounded-md"
    :loading="isLoading"
    :bottom-threshold="bottomThreshold"
    @bottom="onScrollToEnd"
  >
    <div class="p-4 w-screen h-screen bg-background-100 rounded-inherit">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias
      debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque
      facere ea, hic incidunt necessitatibus.
    </div>
  </PScrollable>
</template>

Stylize

<template>
  <PScrollable
    class="w-100 max-w-full h-100 border rounded-md"
    :fader-size="50"
    fader-color="var(--color-blue-300)"
    scrollbar-color="var(--color-orange-400)"
    scrollbar-hover-color="var(--color-orange-600)"
  >
    <div class="p-4 w-screen h-screen bg-background-100 rounded-inherit">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias
      debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque
      facere ea, hic incidunt necessitatibus.
    </div>
  </PScrollable>
</template>

Just rolling

Hide scroll edges and scroll bars, leaving only the scrolling function.

<template>
  <PScrollable class="w-100 max-w-full h-100 border rounded-md" :fader="false" :scrollbar="false">
    <div class="p-4 w-screen h-screen bg-background-100 rounded-inherit">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, cupiditate magnam? Quae alias
      debitis beatae nesciunt veniam excepturi soluta magnam vitae, eius deleniti non doloremque
      facere ea, hic incidunt necessitatibus.
    </div>
  </PScrollable>
</template>

Props

Name	Type	Default	Description
fader	`boolean`	`true`	Show gradient faders at the scrollable edges
loading	`boolean`	-	Suppress the `bottom` event while loading more content
scrollbar	`boolean`	`true`	Render the custom draggable scrollbar instead of the native one
fader-size	`number`	-	Fader gradient length in `px`, defaulting to `16`
fader-color	`string`	-	Fader gradient color, any CSS color value
fader-direction	`'horizontal' \| 'vertical' \| 'both'`	-	Edges to fade: `horizontal`, `vertical` or `both`
wrapper-class	`string \| any[] \| object`	-	Class applied to the outer wrapper element
content-class	`string \| any[] \| object`	-	Class applied to the scrolling content element
content-style	`CSSProperties \| string`	-	Inline style applied to the scrolling content element
scrollbar-size	`number`	-	Scrollbar thickness in `px`, defaulting to `6`
scrollbar-color	`string`	-	Thumb color, defaulting to `--color-gray-alpha-300`
scrollbar-hover-color	`string`	-	Thumb color on hover or active, defaulting to `--color-gray-alpha-500`
bottom-threshold	`number`	`10`	Distance in `px` from the end that triggers the `bottom` event

Events

Name	Type	Description
scroll	`(event: Event) => void`	Emitted when the scrollable content is scrolled.
bottom	`(direction: ComponentDirection, event: Event) => void`	Emitted when a vertical or horizontal scroll reaches the end of the content within `bottom-threshold`.

Slots

Name	Description
default	Default slot

Methods

Name	Type	Description
scrollTo	`(top: number, left: number) => void`	Scroll the content to the given offsets.
forceUpdate	`() => void`	Recalculate the cached padding and scrollbar metrics immediately.