The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Related tags

Scroll vue-scrollbar
Overview

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 CUSTOMIZABLE and RESPONSIVE! YEAH!.

DEMO

Install

You can import vue-scrollbar.vue to your vue component file like this and process it with your preprocessor.;

You can install it via NPM

npm install vue-scrollbar

Usage

<template>
  <vue-scrollbar classes="my-scrollbar" v-bind:speed=100 >
    <div class="should-have-a-children scroll-me">
      <p>And Now</p>
      <p>You Can Put</p>
      <p>A Long Content Here</p>
    </div>
  </vue-scrollbar>
</template>

<script>

  import vueScrollbar from 'vue-scrollbar';

  export default {
    components: { vueScrollbar }
  };

</script>

Props

clasess (String)

Just the ordinary class name for styling the wrapper. It's TOTALLY CUSTOMIZABLE!

/*The Wrapper*/
.my-scrollbar{
  width: 35%;
  min-width: 300px;
  max-height: 450px;
}

/*The Content*/
.scroll-me{
  min-width: 750px;
}
speed (Number)

The wheel step in pixel. The default is 53 pixel per wheel.

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani

Comments
  • Module parse failed: _Scrollbar.sass You may need an appropriate loader to handle this file type

    Module parse failed: _Scrollbar.sass You may need an appropriate loader to handle this file type

    This is so infuriating!

    { [Error: ./~/vue-scrollbar/src/sass/_Scrollbar.sass Module parse failed: D:\WTServer\WWW\node_modules\vue-scrollbar\src\sass_Scrollbar.sass Unexpected token (3:0) You may need an appropriate loader to handle this file type.

    There's nothing in the readme about installing any sass loaders... anyway I can compile sass just fine, so what the hell is happening?

    The loader is set, I even downloaded the sass-loader fr webpack...

      {
        test: /\.sass$/,
        loaders: ['style','css','sass']
      }
    
    opened by gholol 6
  • How could I fix this

    How could I fix this

    First time I route to the vue-scrollbar using page, it works perfectly for me. But if I route to the other page, and then route back to the vue-scrollbar using page and click anywhere, the following error occurs:

    qq 20160521083651 And this is my dependencies list:

    "dependencies": {
      "babel-polyfill": "^6.8.0",
      "babel-runtime": "^6.6.1",
      "vue": "^1.0.24",
      "vue-router": "^0.7.13",
      "vue-scrollbar": "^1.0.4",
      "vue-strap": "^1.0.7",
      "vuex": "^0.6.3"
    }
    
    opened by yoonge 5
  • It seems before destory method has something wrong

    It seems before destory method has something wrong

    Hi,I am back again. In the file named 'horizontal-scrollbar.vue',u write a method beforeDestroy(),u may be want to remove all the event listener before the compoment destory.But u used addEventListener....should it be removeEventListener? Because in another file ,u write removeEventListener...And, my designer said ,I should add two arrow used to adjust the scrollbar,I do not know how to modify the code,because I do not know how to use jade ...If you are willing to...Can u give me an normal version without jade ? Thanks for your help!

    opened by nixizhiguang 4
  • Issue with long horizontal scroll

    Issue with long horizontal scroll

    Hello! When I was trying to use this component for a long horizontal scroll it didn't work. I realized what's wrong with that. Look at this method:

    handleChangePosition(vScrollbar, orientation){
            // Convert Percentage to Pixel
            let next = vScrollbar / 100 * this.scrollAreaHeight
            if( orientation == 'vertical' ) this.normalizeVertical(next)
            if( orientation == 'horizontal' ) this.normalizeHorizontal(next)
    }
    

    I think next variable should have condition either and also using different scrollArea values. At least it works for me.

    handleChangePosition(vScrollbar, orientation){
            // Convert Percentage to Pixel
            let next = vScrollbar / 100 * (orientation == 'vertical' ? this.scrollAreaHeight : this.scrollAreaWidth)
            if( orientation == 'vertical' ) this.normalizeVertical(next)
            if( orientation == 'horizontal' ) this.normalizeHorizontal(next)
    }
    
    opened by pbelyaev 2
  • when i use it with webpack ,it takes error

    when i use it with webpack ,it takes error

    Hi, as the title says,I got an error,web pack tell me to get an loader to resolve your vue compoment.What I need to install or set ? The error seems like this:ERROR in ./~/vue-scrollbar/src/sass/_Scrollbar.sass Module parse failed: /web/xxxx/node_modules/vue-scrollbar/src/sass/_Scrollbar.sass Unexpected token (3:0) You may need an appropriate loader to handle this file type.

    But I have set webpack with the sass loader ,like this:{ test: /.[scss,sass]$/, loaders: ['style', 'css', 'sass'] },

    opened by nixizhiguang 2
  • Does vue-scrollbar work on IE9?

    Does vue-scrollbar work on IE9?

    Hi BosNaufal, I'm trying to use your vue-scrollbar and I am not sure if it works well on IE9. Could you please show the compatibility on README? Thank you very much.

    opened by RyanLiu0235 1
  • import your vue-scrollbar, find error: cannot find module 'jade'

    import your vue-scrollbar, find error: cannot find module 'jade'

    I use vue-cli to build this application. When I import your vue-scrollbar, the terminal show this error.

    Unhandled rejection Error: Cannot find module 'jade'
        at Function.Module._resolveFilename (module.js:440:15)
        at Function.Module._load (module.js:388:25)
        at Module.require (module.js:468:17)
        at require (internal/module.js:20:19)
        at /Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/consolidate/lib/consolidate.js:324:34
        at /Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/consolidate/lib/consolidate.js:143:5
        at Promise._execute (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/bluebird/js/release/debuggability.js:272:9)
        at Promise._resolveFromExecutor (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/bluebird/js/release/promise.js:475:18)
        at new Promise (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/bluebird/js/release/promise.js:77:14)
        at promisify (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/consolidate/lib/consolidate.js:136:10)
        at Function.exports.jade.render (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/consolidate/lib/consolidate.js:320:10)
        at Object.module.exports (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/vue-loader/lib/template-loader.js:39:20)
        at WEBPACK_CORE_LOADER_EXECUTION (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
        at runSyncOrAsync (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
        at nextLoader (/Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
        at /Users/chaselwu/Developing/Codes/vitualreaty/vitual-process-site/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    
    opened by chasewoo 1
  • Not compatible with sidescrolling mouse

    Not compatible with sidescrolling mouse

    Hi, trying out the live demo I noticed scrolling sideways (with the Logitech MX Master) didn't actually scroll to the side. Instead, it just scrolls me up if it's not at the top already.

    Quick demo where I scroll down and then try scrolling sideways. I never (intentionally) scroll upwards in this gif:

    vue-scrollbar

    opened by svenluijten 1
Owner
Naufal Rabbani
Either Web Developer Live In Indonesia Who Love to Write and Code. Do You have any open source project which you want me to work on? Just contact me soon!
Naufal Rabbani
(🗃️ 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 655 Sep 22, 2022
null 1 Oct 8, 2021
🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level.

A simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome simple-scrollbar

Jonathan Bakebwa 12 Jul 6, 2022
The best custom scroll for the web.

mr-scroll The best custom scroll for the web. Live demo here. Features Custom and easy to style scrollbar Uses the native browser scrollbar behind the

Mohammad Rahhal 17 Dec 18, 2021
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 223 Sep 9, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
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 9 Sep 22, 2022
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
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 226 Sep 21, 2022
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

志平 刘 10 Apr 9, 2022
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 261 Sep 6, 2022
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.2k Sep 28, 2022
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 30 Sep 18, 2022
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 34 Sep 18, 2022
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 261 Sep 6, 2022
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
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.2k Sep 28, 2022
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

staticdeng 53 Sep 21, 2022
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 26 Jul 15, 2022