Smooth scrollbar for Vue.js projects

Overview

Vue Smooth Scrollbar

Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar.

Usage

1. Install dependency

npm install --save vue-smooth-scrollbar

2. Import component into main.js

// src/main.js
import Vue from 'vue'
...
import SmoothScrollbar from 'vue-smooth-scrollbar'
Vue.use(SmoothScrollbar)
...

3. Use component in your templates

<template>
  <div id="scroll-area">
    <smooth-scrollbar>
      <div id="example-content"></div>
    </smooth-scrollbar>
  </div>
</template>

<style>
  #scroll-area {
    width: 500px;
    height: 500px;
  }

  #example-content {
    width: 2000px;
    height: 2000px;
  }
</style>

Backlog

  • Plugin structure
  • Basic implementation
  • Options
  • Events
  • Methods
  • Styling
  • Build dist
  • SSR / nuxt
Issues
  • Doesn't Support SMART TVs

    Doesn't Support SMART TVs

    I did build all project using this plugin but then I got surprised when I opened the website on my smart tv everything was upside down hope this gets fixed as soon as possible cause It's hard to rechange the plugin or remove it.

    opened by wahibAbdou 3
  • How to change the options?

    How to change the options?

    I'd like to know how can I change the default options for vue-smooth-scrollbar? How can I change value of alwaysShowTracks to true? How can I pass value from Vue Component?

    opened by forethoughtde 2
  • Smooth Scrollbar not running in ie

    Smooth Scrollbar not running in ie

    Smooth Scrollbar not running in ie because use es6 syntax. Please fixed this issue.

    opened by Sotatek-HungNguyenThanh 1
  • How to use?

    How to use?

    http://prntscr.com/mqw3o6 Seems like it doesn't work. Style on vertical axis is display: none, and nothing happens when scrolling

    opened by Safe-Mode 1
  • Accessing the scrollbar instance from parent

    Accessing the scrollbar instance from parent

    I'm trying to make an element within the smooth-scrollbar component position fixed by doing something along the lines of this, since fixed position is not supported by smooth scrollbar: scrollbar.addListener(function(status) { let offset = status.offset; fixed.style.top = offset.y + 'px'; fixed.style.left = offset.x + 'px'; });

    How do I access the scrollbar = SmoothScrollbar.init(.....) instance from the SmoothScrollbar.vue file?

    Thanks so much!

    opened by jessicafanfan 1
  • Pass offset property into header component

    Pass offset property into header component

    Hi there, thank you for creating this plugin. Is there any way I could pass the offset property into for instance a Header component (outside of the scroll-section)? This way I could for instance change the color of the header when the user has scrolled.

    opened by JoepSnijders 0
  • Fixed destroy error on vue-router

    Fixed destroy error on vue-router

    Thanks for your awesome work. I just imported your package into our app and it works great. πŸ’ͺ🏻😊

    Just the destroyed() function throws an error. We use vue-router and if I switch a main route this error message appears:

    Error in destroyed hook: "TypeError: Cannot read property 'destroy' of null" <

    I fixed it with an if statement.

    Best regards, Stefan

    opened by Stefan-Dressler 1
  • Slow down when reach top and bottom edges

    Slow down when reach top and bottom edges

    Hello!

    Everything works nice, thank you, but I have a question of implementation.

    How to slow down with ease when reach to the edge of start and end document?

    Like https://www.thehookgroup.co.uk, for example.

    Thanks again

    opened by cristianalonso 0
  • Doesn't work with max-height instead of height

    Doesn't work with max-height instead of height

    Changing height:400px; to max-height:400px; breaks the scrollbar. Original smooth-scrollbar works with max-height, would be great for this plugin to work with it as well. It is useful for lists with dynamic content, popups, etc.

    opened by CodeSpartan 0
  • SSR Support

    SSR Support

    Hi mate, really appreciate this port, it's working great on my Vue projects. However, I'm attempting to use this library in a Nuxt project and and stumbling with SSR support. I've noticed this is on your roadmap, do you have any idea when this might get implemented / any guidance to how to approach getting it working so I can potentially look at opening a PR?

    Thanks again

    opened by samuelgoddard 6
  • Fix problem with (conditionally visible) nested scrollbars

    Fix problem with (conditionally visible) nested scrollbars

    Fix problem with (conditionally visible) nested scrollbars causing Vue.js error on destroy: Error in destroyed hook: "TypeError: scrollbar is null".

    Problem caused by the global "scrollbar" var which is set to null on first (nested) destroyed scrollbar. If the parent scrollbar is destroyed, the global "scrollbar" var is alreday null and causes the described js error.

    opened by akno77 0
Owner
Magisters
Home for our repos.
Magisters
null 1 Oct 8, 2021
A vuejs scrollbar component for PC

vue-scrollbar-live pkg.module supported, which means that you can apply tree-shaking in you project δΈ­ζ–‡ζ–‡ζ‘£ A vue scrollbar component, support SSR. repos

εΏ—εΉ³ 刘 11 Oct 12, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
a nice scrollbar for vue.js 2.0

vue-nice-scrollbar a nice scrollbar for vue.js 2.0 Demo DEMO Install npm install vue-nice-scrollbar --save Usage import Vue from 'vue' import vue

Burning 14 Jan 22, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 116 Mar 23, 2021
A vue component of scrollbar

vue-scrollbar-simple Introduction vue-scrollbar-simple is a vue component of scrollbar Install $ npm install vue-scrollbar-simple --save Usage impo

Zhi Xiong 3 Oct 1, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 12, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 19, 2021
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action β†’

Ivo Dolenc 4 Oct 1, 2021
The virtual responsive crossbrowser scrollbar component for VueJS 2x

VBar The virtual responsive crossbrowser scrollbar component for VueJS 2x DEMO Usage Install Using NPM npm i v-bar Using yarn yarn add v-bar In your .

Luigui Delyer 222 Oct 2, 2021
(πŸ—ƒοΈ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 659 Sep 13, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021
⚑️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
πŸ“œ Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 154 Sep 8, 2021
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto DEMO Scrolling to elements was never this easy! This is for vue 2.x and vue 3.x (since v2.19.0) For vue 1.x use [email protected] (note

Igor Randjelovic 1.8k Oct 13, 2021