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

Notes

  • 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
$ npm install vue-managed-scroller --save

Usage

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

Vue.use(VueManagedScroller);
import { ManagedScroller, ManagedScrollerShell } from 'vue-managed-scroller';

export default {
  ...
  components: {
    ManagedScroller,
    ManagedScrollerShell
  }
  ...
};

ManagedScroller

Configuration

PropertyTypeDefaultDescription
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.

Methods

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

Events

EventDescription
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

PropertyTypeDescription
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.

ManagedScrollerShell

Configuration

PropertyTypeDefaultDescription
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

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…