Library have template on pug, but don't have pug-plain-loader in devDependencies. So I have install it separately. You should put it to devDependencies in library package.json file.

how to set scroll-bar color

How I can use this plugin without importing it with Webpack? I want to build it in a single JS file.

I met a problem when I use v-bar with [email protected]. It is like this:

/Users/wuyiqing/Desktop/data-manager-front-end/node_modules/v-bar/src/components/v-bar.vue:1 
Uncaught SyntaxError: Unexpected token <
    at Object.exports.runInThisContext (vm.js:78)
    at Module._compile (module.js:543)
    at Object.Module._extensions..js (module.js:580)
    at Module.load (module.js:488)
    at tryModuleLoad (module.js:447)
    at Function.Module._load (module.js:439)
    at Module.require (module.js:498)
    at require (internal/module.js:20)
    at eval (webpack-internal:///90:1)
    at Object.<anonymous> (renderer.js:1281)

At first, I thought it was because of the version of vue. But it was not work when I changed the Vue to 2.3.3.

i just want to know if it works on IE10+

Y-Axis Scrollbar is not draggable. It works but I cannot drag via the scrollbar.

I use the v-bar in part of my app and it worked great. When I created a second for use in a different .vue file, I get the error below when it tried to display. Do I need to register the component globally?

webpack-internal:///./node_modules/vue/dist/vue.esm.js:1697 TypeError: Cannot read property 'resizeTriggers' of undefined
at addResizeListener (webpack-internal:///./node_modules/detect-resize/lib/index.js:132)
at VueComponent.mounted (webpack-internal:///./node_modules/v-bar/node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./node_modules/v-bar/src/components/v-bar.vue:162)
at callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:2869)
at Object.insert (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4046)
at invokeInsertHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5802)

With Chrome Versión 59.0.3071.115 (Build oficial) (64 bits) it works but show in web developer console:
Uncaught SyntaxError: Invalid shorthand property initializer
Uncaught SyntaxError: Invalid shorthand property initializer
Uncaught SyntaxError: Invalid shorthand property initializer
Uncaught SyntaxError: Invalid shorthand property initializer

When I scroll with the mouse, it feels like the scroll-bar slows down. Any way to fix it?
Another question in case of adding more item in a div (with v-for) is the scroll-bar resized?

Vulnerability description:

• https://nvd.nist.gov/vuln/detail/CVE-2021-21353
• https://avd.aquasec.com/nvd/cve-2021-21353/

Fixed in version 3.0.1

Update pug dependency to 3.0.1

In the demo page the top of the scrollbar snaps to the cursor position when you grab it. The scrollbar should be given a negative offset according to the position where it has been grabbed.

TypeError: Cannot read property '__resizeListeners__' of undefined at removeResizeListener (eval at <anonymous> (app.js:1087), <anonymous>:154:12) at VueComponent.destroyed (eval at <anonymous> (app.js:919), <anonymous>:40:99) at callHook (eval at <anonymous> (app.js:721), <anonymous>:2274:21) at VueComponent.Vue.$destroy (eval at <anonymous> (app.js:721), <anonymous>:2096:5) at pruneCacheEntry (eval at <anonymous> (app.js:721), <anonymous>:4057:29) at VueComponent.destroyed (eval at <anonymous> (app.js:721), <anonymous>:4078:7) at callHook (eval at <anonymous> (app.js:721), <anonymous>:2274:21) at VueComponent.Vue.$destroy (eval at <anonymous> (app.js:721), <anonymous>:2096:5) at destroy (eval at <anonymous> (app.js:721), <anonymous>:2963:33) at invokeDestroyHook (eval at <anonymous> (app.js:721), <anonymous>:4778:59)

this looks simular: link

Hello,
how to detect the event when you arrive at the top v-bar? For example, I would like to make a call when I get to the top of the scroll bar (make a top to refresh)

Thank you.

Why are all childs with padding?

https://github.com/luiguild/v-bar/blob/master/src/components/v-bar.vue#L21-L22

When i change the components inside the wrapper i got this warning.
While in dev mode i dont get this warning, only after build.

[Vue warn]: Error in beforeDestroy hook: "TypeError: Cannot read property 'splice' of undefined"

found in

---> <VBar> at node_modules/v-bar/src/components/v-bar.vue
       <Forms> at src/components/forms/Entry.vue
         <Forms> at src/views/Forms.vue
           <App> at src/components/App.vue
             <Root>

TypeError: Cannot read property 'splice' of undefined
    at removeResizeListener (index.js:154)
    at VueComponent.beforeDestroy (eval at ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"babelrc":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/v-bar/src/components/v-bar.vue (forms-bundle.chunk.js:12), <anonymous>:175:84)
    at callHook (vue.runtime.esm.js:2662)
    at VueComponent.Vue.$destroy (vue.runtime.esm.js:2451)
    at destroy (vue.runtime.esm.js:3543)
    at invokeDestroyHook (vue.runtime.esm.js:5271)
    at invokeDestroyHook (vue.runtime.esm.js:5276)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:5557)
    at VueComponent.Vue.$destroy (vue.runtime.esm.js:2474)
    at destroy (vue.runtime.esm.js:3543)

Any ideia?

<v-bar wrapper="scrolled-container"
               vBar="v-bar"
               vBarInternal="v-bar-internal">...</v-bar>
.v-bar {
        background: none !important;
}

.v-bar-internal {
        background: red !important;
}

This code is not working. And unfortunately you didn't add examples how to customize it.

OS: Linux
Browser: Google Chrome 58

Hey Luigui, I am trying out your package and it looks really awesome so far :)

I have two questions tho:

1. Is there any way to access the scroll listeners?
   Very much like the "perfect-scrollbar" package does. This could be useful to implement infinite scrolls :)

2. How would you advice to make the scroll start at the bottom?
   Asking this because I'm trying to pair this directive with your package. No success so far, the scroll doesn't want to go to the bottom :)

Thanks.

When using mouse to move scrollbar, it works not as expected: https://media.giphy.com/media/xT39D7D5a9G5yi5vmU/giphy.gif

As you can see, it starts to move with delay.

@luiguild, can we do something with that?

I did everything to set up this vbar as stated in the instruction, however, I ran into this error that won't let me move forward. How can i solve this issue?

By simply importing module...

/node_modules/v-bar/src/components/v-bar.vue:1
(function (exports, require, module, __filename, __dirname) { <style scoped lang="sass">
                                                              ^

SyntaxError: Unexpected token <

Getting the following error:

ERROR in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-4350943e&scoped=true!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/v-bar/src/components/v-bar.vue
Module build failed:
    @import ../sass/bar

My web pack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/main.js',
    vue: 'vue',
    'vue-bundle': './src/vue.bundle.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'js/[name].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      // names: ['vue', 'vuex', 'vue-router', 'vue-router-sync', 'manifest']
      names: ['vue', 'vue-bundle', 'manifest']
    })
  ],
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
          'scss': 'vue-style-loader!css-loader!sass-loader',
          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: './img/[name].[ext]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

I've tried to put all sass styles inside of the component but that didn't help either.

Hello,
I'm working on a chat and I want to fix the conversation on the last message.
I want the scroll bar to be at the bottom of the chat room
May you have a solution for me please ?

You can see this bug in demo

Uncaught TypeError: Cannot read property 'offsetTop' of undefined
    at a.startDrag (app.469ed2d6a8e1cda9b93f.js:272)
    at n (vue.esm.js:124)
    at HTMLDivElement.t (vue.esm.js:1656)

It's because e.explicitOriginalTarget works only in firefox.
How can fix it?

Hi, in the demo the scrollbar is not moving. Samsung S4 with Chrome