(πŸ—ƒοΈ 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

Overview

πŸ—ƒοΈ Archived & No Longer Maintained

I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (time, money, motivation, etc.) for FOSS. There's a chance I might come back and start working on this library again in future (however, currently, I don't plan on doing that).

I won't maintain this library, but it's still pretty usable (and if you're looking for horizontal scrollbars, you can take a look into development branch /docs/demotests.html which has some examples).


Vuebar

Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on GGather.com.

Official Website (Docs & Examples)

Go to github.serafin.io/vuebar

Acknowledgements

Used successfully in production on GGather.com

Tested with the help of Browserstack

Links

GitHub

NPM

Serafin.io (Author)

Issues
  • Vuebar adds padding-right: 20px instead of width in Safari.

    Vuebar adds padding-right: 20px instead of width in Safari.

    WHen I open my website on Safari I see extra space on the right side. The reason ispadding-right:20pxand lack of width: (100% - 15px); In Chrome it works perfectly and there is no rule padding-right:20px but there is width:calc(100% - 15px). If I change manually these rules in Safari's console (remove padding and add width:calc(100%-15px)) it also works. How to fix this behavior? Please help.

    opened by kirill001 13
  • Using max-height for content

    Using max-height for content

    Hi, Thank you to contribute to VueJS ecosystem.

    I wonder why max-height CSS rule instead of height rule doesn't work with vuebar. It would be convenient because a small amount of content doesn't need scrollbar and don't need to take so much space. image

    opened by lbineau 10
  • Doesn't work properly with transitions

    Doesn't work properly with transitions

    Hello, let me start by saying i loved how beautiful your component is and i cant wait to see it live in my test project.

    This isn't an issue but more my lack of knowledge on how to implement it. I added the npm package and i initialized it in my main class as you instructed us on the main page but nothing is working. I am not seeing the scrollbar show up.

    Do you by any chance have a sample project using the scrollbar i can test? Thank you sir.

    Bug Accepting PRs Priority: Medium 
    opened by nicolasvahidzein 10
  • scrollTo() method

    scrollTo() method

    I had to remove old repo. Here is new pull request with fixed code.

    opened by roszpun 8
  • Vuebar for a textfield

    Vuebar for a textfield

    Hello Dominik,

    i tried implement the vuebar for a textfield, but i don't really know where to put my tags. Can you help please?

    opened by nicolasvahidzein 8
  • Change to getNativeScrollbarWidth (fixes issue #42)

    Change to getNativeScrollbarWidth (fixes issue #42)

    Turns out the native scrollbar width calculation fails in Safari 11 (tested with 11.0.2). As the child element's offsetWidth still returns 100px after setting wrapper's overflowY to scroll, the returned scrollbar width is 0. Setting child's width to 100% makes the browser report the correct offsetWidth, though.

    Fixes: https://github.com/DominikSerafin/vuebar/issues/42

    opened by gregpabian 7
  • Failed to resolve directive: bar

    Failed to resolve directive: bar

    I am having really hard time trying to set up vuebar. All the CSS settings I have as recommended. I think there must be sth obvious I am missing, as I am novice with vue.

    My code:

    <template>
      <div id="app">
        <div class="content" v-bar>
          _lorem paragraphs..._
        </div>
      </div>
    </template>
    
    <script>
      export default {
    
      }
    </script>
    
    <style>
      #app {
        position: relative;
        overflow: hidden;
      }
      .content {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 400px;
        -ms-overflow-style: scrollbar;
        width: 400px;
      }
    </style>
    

    The error in the console is:

    [Vue warn]: Failed to resolve directive: bar
    (found in <Anonymous>)
    

    And the scrollbar stays unchanged. I use vue-cli with webpack, chrome browser, ubuntu os. Any suggestions?

    opened by jankulma 6
  • Don't prevent parent scroll when vuebar is not shown

    Don't prevent parent scroll when vuebar is not shown

    If the vuebar is not shown, ie the content fits into it's container, and preventParentScroll is set to true, the parent should not be prevented from scrolling.

    Intended behaviour: -vuebar shown, preventParentScroll = true - Parent is inhibited from scrolling. -vuebar shown, preventParentScroll = false - Parent is not inhibited from scrolling. -vuebar hidden, preventParentScroll = true - Parent is not inhibited from scrolling. -vuebar hidden, preventParentScroll = false - Parent is not inhibited from scrolling.

    opened by ericcirone 6
  • Box-sizing

    Box-sizing

    1. Find a way to not use content box

    2. Test vuebar on default *{box-sizing:content-box}

    Priority: Low Improvement 
    opened by DominikSerafin 6
  • Dragger misaligned with mouse pointer on retina resolution monitors

    Dragger misaligned with mouse pointer on retina resolution monitors

    Hi, thanks for contributing this plugin! Using Chrome, dragging the dragger does not work as expected: The drag-event seems to be offset.

    Steps to reproduce:

    1. Go to first example on https://github.serafin.io/vuebar/#examples
    2. Click and drag the dragger downwards.

    Result:

    Dragger jumps to the bottom of the scrollable element along with the content. From here only able to scroll up, but this is offset by what looks like the height of the scrollable element.

    It might be the "jump" when clicking the scrollbar causing the issues?

    Thanks.

    Bug 
    opened by jeppebemad 5
  • Scroll top problem when I have a Vuebar with a scrolleable table inside

    Scroll top problem when I have a Vuebar with a scrolleable table inside

    I have a div with Vuebar and inside have a lot of elements, one of them is a table with his own scroll... I am inside the table and I scroll it down with the mouse and keep it at the middle of the table, then I scroll the container down, and back to the top, go inside the table again and try to scroll up with the mouse, and it doesn't work. I can scroll down again but the scroll top is stuck. If I move the physical scroll of the table by clicking and move it, it works fine, but not with the mouse wheel.

    opened by Verovig 0
  • observe attributes

    observe attributes

    Need add https://github.com/DominikSerafin/vuebar/blob/master/vuebar.js#L469 attributes: true for fully observe dom changes

    opened by v2pwww 0
  • Add support to max-height, max-width, min-height and min-width

    Add support to max-height, max-width, min-height and min-width

    in function initScrollbar add:

     ...
                 state.el2.style.height = '100%';
                state.el2.style.maxHeight = 'inherit';
                state.el2.style.minHeight = 'inherit';
     ...
                         state.el2.style.width = '100%';
                        state.el2.style.maxWidth = 'inherit';
                        state.el2.style.minWidth = 'inherit';
    

    and in destroyScrollbar add:

                    state.el2.style.height = '';
                    state.el2.style.maxHeight = '';
                    state.el2.style.minHeight = 'inherit';   
                    state.el2.style.width = '';
                    state.el2.style.maxWidth = '';
                    state.el2.style.minWidth = 'inherit';
    
    opened by Dev1lDragon 1
  • State of PRs

    State of PRs

    Just wanted to leave quick note about the state of Vuebar pull requests.

    Vuebar doesn't have any automated testing implemented. It needs unit, integration and visual testing. And going through pull requests and testing all of them manually is extremely time consuming. Due to the nature of Vuebar I need to go through multiple devices, browsers & customization options during manual testing.

    And unfortunately, currently I don't have a lot of time for FOSS/hobby projects.

    However, I appreciate and I thank everyone who's opened pull requests and took the time to improve Vuebar.

    I'm not sure when - but I will ultimately implement the automated testing suites and after that I'll look into all of the pull requests of Vuebar.

    opened by DominikSerafin 0
  • (2.0/development) el undefined?

    (2.0/development) el undefined?

    https://github.com/DominikSerafin/vuebar/blob/development/vuebar.js#L175

    opened by DominikSerafin 0
  • scrollTop/scrollHeight rounding discrepancies breaks `preventParentScroll` when display scaling is set.

    scrollTop/scrollHeight rounding discrepancies breaks `preventParentScroll` when display scaling is set.

    The issue here is pretty straight forward, on monitors that have any display scaling set (which I do, and I think it's pretty common, in the era of hdpi monitors), scrollTop can return a decimal value (see here). scrollHeight and `clientHeight on the other hand, always round to an integer (see here and here).

    This results in an error where scrollTop is less than scrollDist, even though the scrollbar has reached the bottom. This is breaking preventParentScroll for me.

    It's a super easy fix, and I'd be fine to do a PR if you're accepting them. Thanks!

    opened by Aaron-Pool 2
  • (2.0/development) Use ResizeObserver to detect element size change

    (2.0/development) Use ResizeObserver to detect element size change

    As for compatibility

    • Don't include polyfill in vuebar itself
    • Add a note in documentation about this so people can polyfill that themselves
    opened by DominikSerafin 0
  • [Feature] Import directive instead plugin

    [Feature] Import directive instead plugin

    I want to have a posibility to import derective itself to use it localy in component, instead of use it in vue globaly as a plugin.

    // component file .vue
    import Vuebar from 'vuebar';
    
    export default {
      directives: {
        Vuebar
      },
      // etc...
    }
    
    Enhancement Version 2.0 
    opened by onufriievkyrylo 2
  • [Feature] Global defaults

    [Feature] Global defaults

    We have multiple templates using vuebar, and repeated config in each, even within the same template.

    It would be useful to set up global default config when including the mixin in Vue. Of course, options included with the directive in the template should override global defaults.

    Something like:

    import Vuebar from 'vuebar';
    Vue.use(Vuebar, {
      defaults: {
        el1Class: 'foo',
        useScrollbarPseudo: true,
        unselectableBody: false
        // etc...
      }
    });
    

    Don't have time to try my hand at this and make a PR right now, but just leaving a note that this would be a useful addition.

    Enhancement Version 2.0 
    opened by jadell 2
Releases(v2.0.0-alpha)
  • v2.0.0-alpha(Sep 11, 2018)

    Somewhat usable but undocumented, unstable and incomplete alpha release of Vuebar 2 which mainly adds horizontal scrolling and dragger min/max height styling.

    Source code(tar.gz)
    Source code(zip)
  • v0.0.20(Sep 11, 2018)

  • v0.0.19(Sep 11, 2018)

  • v0.0.18(Jan 10, 2018)

    Fixes scroll width calculation issues on Safari (merged https://github.com/DominikSerafin/vuebar/pull/45, fixes https://github.com/DominikSerafin/vuebar/issues/42)

    Source code(tar.gz)
    Source code(zip)
The Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2.

Vue 2 Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on react-scrollbar. All animation, Height and Width are

Naufal Rabbani 232 Nov 2, 2021
null 1 Oct 8, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 171 Dec 10, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 171 Dec 10, 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 208 Jan 17, 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 Jan 18, 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 Jan 18, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

HonorΓ© Nintunze 56 Jan 17, 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 28 Jan 19, 2022
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 47 Jan 14, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 510 Jan 12, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 512 Jan 20, 2022
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events βœ… On ❌

Volodymyr Antoniuk 42 Aug 2, 2021
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 251 Jan 19, 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 6 Oct 2, 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
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 32 Dec 20, 2021
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 251 Jan 19, 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