Scroller

A scroller component that allows blazing fast scrolling of any amount of data.

Preview

Default Scroller

<dt-scroller
 :items="items"
 :item-size="32"
 :scroller-height="200"
 :scroller-width="300"
 >
 <template #default="{ item }">
   <div class="user">
     {{ item.name }}
   </div>
 </template>
</dt-scroller>

Dynamic Scroller

<dt-scroller
 :items="dynamicItems"
 :min-item-size="54"
 :scroller-height="300"
 :scroller-width="500"
 :dynamic="true"
 >
 <template #default="{ item }">
   <div class="avatar">
     {{ item.id }}
     <img
      :key="item.avatar"
      :src="item.avatar"
      alt="avatar"
      class="image"
     >
  </div>
  <div class="text">
     {{ item.message }}
  </div>
 </template>
</dt-scroller>

Vue API

Slots

Name	Description
default

Props

Name	Description	Default
items required	The items to render. If the items are simple arrays, the index will be used as the key. If the items are objects, the keyField will be used as the key. Type: array
direction	The direction of the scroller. Type: string Values: verticalhorizontal	'vertical'
dynamic	Indicates if the items need to react to changes in their size. If disabled the itemSize prop is required and you will get improved performance. If enabled the minItemSize prop is required and you will have reduced performance but the ability to reactively size list items Type: boolean Values: truefalse	false
itemSize	Display height (or width in horizontal mode) of the items in pixels used to calculate the scroll size and position. Required if DYNAMIC is false Type: number	null
itemTag	The tag to use for the items. Type: string	'div'
keyField	The key field to use for the items. If the items are objects, the scroller needs to be able to identify them. By default it will look for an id field on the items. This can be configured with this prop if you are using another field name. Type: string	'id'
listTag	The tag to use for the list. Type: string	'div'
minItemSize	Minimum size used if the height (or width in horizontal mode) of a item is unknown. Is required for the initial render of items in DYNAMIC size mode. Type: number\|string	null
scrollerHeight	The height of the scroller. Can be a number (in pixels) or a string (in CSS units). Type: string\|number	'100%'
scrollerWidth	The width of the scroller. Can be a number (in pixels) or a string (in CSS units). Type: string\|number	'100%'

Events

Name	Description
user-position	Describe when the scroller changes from start/middle/end

Preview

Default Scroller

Dynamic Scroller

Vue API #

Slots

Props

Events

Vue API