Parameters

API reference for Vue Table Touch Scroll

API Reference

Directive

vTableTouchScroll

A Vue 3 custom directive that adds touch scroll support to table elements.

Global Registration:

import VueTableTouchScroll from 'vue-table-touch-scroll'

app.use(VueTableTouchScroll)
// After registration, use v-table-touch-scroll in templates

Local Import:

import { vTableTouchScroll } from 'vue-table-touch-scroll'

Type Definitions

TableTouchScrollOptions

Configuration options interface for the directive.

PropertyTypeDefaultDescription
enabledbooleantrueWhether to enable touch scrolling
presetTablePreset-UI library preset name, automatically applies the corresponding scroll container selector
selectorstring-CSS selector for the target scroll element, takes priority over preset
frictionnumber0.95Friction/decay rate. Higher = slower decay (smoother scrolling), lower = faster stop (range: 0.8 - 0.99)
dragThresholdnumber5Displacement threshold (px) before determining scroll direction, distinguishes minor jitter from intentional dragging
disableInertiabooleanfalseWhether to disable inertia scrolling. When true, scrolling stops immediately on finger release
clickBlockThresholdnumber0.5Speed threshold (px/ms) for emergency stop click blocking. Higher = more lenient, lower = more strict (range: 0.3 - 1.0)
onScrollStart() => void-Callback fired when scrolling starts, after finger displacement exceeds dragThreshold and direction is locked
onScrollEnd() => void-Callback fired when scrolling ends, after inertia animation fully stops

Full Type Signature:

interface TableTouchScrollOptions {
  enabled?: boolean
  preset?: TablePreset
  selector?: string
  friction?: number
  dragThreshold?: number
  disableInertia?: boolean
  clickBlockThreshold?: number
  onScrollStart?: () => void
  onScrollEnd?: () => void
}

TablePreset

Supported UI library preset types and their corresponding scroll container selectors.

PresetUI LibrarySelector
'element-plus'Element Plus.el-scrollbar__wrap
'ant-design-vue'Ant Design Vue.ant-table-body
'arco-design'Arco Design.arco-table-body
'naive-ui'Naive UI.n-scrollbar-container
'primevue'PrimeVue.p-datatable-table-container
'vuetify'Vuetify.v-table__wrapper tbody
'vxe-table'VxeTable.vxe-table--body-inner-wrapper
type TablePreset =
  | 'element-plus'
  | 'ant-design-vue'
  | 'arco-design'
  | 'naive-ui'
  | 'primevue'
  | 'vuetify'
  | 'vxe-table'

Exports

UI_LIBRARY_SELECTORS

UI library selector preset mapping constant.

import { UI_LIBRARY_SELECTORS } from 'vue-table-touch-scroll'

const selector = UI_LIBRARY_SELECTORS['element-plus']
// '.el-scrollbar__wrap'

getSelectorByPreset

Get the corresponding CSS selector by preset name.

import { getSelectorByPreset } from 'vue-table-touch-scroll'

const selector = getSelectorByPreset('element-plus')
// '.el-scrollbar__wrap'

Parameters

ParameterTypeDescription
presetTablePresetUI library preset name

Returns

string | undefined — The corresponding CSS selector, or undefined if the preset does not exist.

Internal Physics Engine Parameters

Physics engine constants used internally by the directive (not externally configurable):

ConstantValueDescription
DEFAULT_FRICTION0.95Default friction/decay rate
MIN_VELOCITY0.05Velocity threshold (px/ms) to stop inertia animation
MAX_DT32Max frame interval limit (ms), prevents jumps after frame drops
DEFAULT_DRAG_THRESHOLD5Default drag detection threshold (px)
INERTIA_STOP_DELAY80Inertia protection delay (ms). If finger pauses longer than this before release, inertia is not triggered
SAFE_CLICK_VELOCITY0.5Default speed threshold (px/ms) for emergency stop click blocking
Configuration
Element Plus