A Managed Scroller To Dynamically Load Items | vue-managed-scroller

Manage Scroller is a component of Vue.js to dynamically load objects into the view.

dynamically add form fields vue, vue v for dynamic data, dynamically addremove input fields using vuejs, vue js remove component dynamically, add textbox on button click vuejs


  • In order to handle scroller resizing, either the ResizeObserver API or the IntersectionObserver API is used. If neither is available, a simple resize event will be attached to the window. If these APIs are not available, consider using a multi-fill IntersectionObserver here. On the other hand, you might consider approaching resizing with your own logic via the resizing method.
  • Scroller is set to a default width of 100% and height of 100%, which means that the element that wraps in the scroller must have a specific width and height, otherwise you can manually adjust the width and height of the scroller via its props.

How to make use of it:

Install & Download:

# Yarn
$ yarn add vue-managed-scroller

$ npm install vue-managed-scroller --save


import Vue from 'vue';
import VueManagedScroller from 'vue-managed-scroller';

import { ManagedScroller, ManagedScrollerShell } from 'vue-managed-scroller';

export default {
  components: {



itemsArray, Number0The items that will be rendered in the list.
widthString, Number100%The width of the scroller area.
heightString, Number100%The height of the scroller area.
directionStringverticalThe scroll direction of the scroller: vertical or horizontal.
bufferNumber0How much content should be rendered outside the viewing area (in pixels)?
invertMouseWheelBooleanfalseAllow the usage of the mousewheel to scroll when the scroll direction is set to horizontal.


resizeTriggers a resize of the scroller.
updateShellSizeUpdates a shell size by an index.


startReachedTriggers when the first item is rendered.
endReachedTriggers when the last item is rendered.
renderTriggers when rendered and provides the index of the top most shell.

Default Slot

itemanyA single item within the list.
itemIndexNumberThe item index.
isVisibleBooleanWhether the rendered item is in the viewing area.
updateShellSizeFunctionA method to update the shell size of a particular shell when the shell’s size may have potentially changed.



staticBooleanfalseWhether the shell is a static shell or not. (Static shells are not wrapped by any divs and do not adjust in size via updateShellSize)
sizeNumber40The size of the shell; either the width or height depending on the scroll direction.

dynamically load items with vue js, vue-managed-scroller Plugin/Github, vue dynamic list, vuejs add item to list, vue dynamic form

See Demo And Download

Official Website(levine404): Click Here

This superior jQuery/javascript plugin is developed by levine404. For extra advanced usage, please go to the official website.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *