code: function createState(el){
              el._vuebarState = {
  
                  // config with default values that may be overwritten on directive intialization
                  config: {
                      scrollThrottle: 10,
                      draggerThrottle: 10,
                      resizeRefresh: true,
                      observerThrottle: 100,
                      resizeDebounce: 100,
                      unselectableBody: true,
                      overrideFloatingScrollbar: true,
                      scrollingPhantomDelay: 1000,
                      draggingPhantomDelay: 1000,
                      preventParentScroll: false,
                      useScrollbarPseudo: false, // experimental
  
                      el1Class: 'vb',
                      el1ScrollVisibleClass: 'vb-visible',
                      el1ScrollInvisibleClass: 'vb-invisible',
                      el1ScrollingClass: 'vb-scrolling',
                      el1ScrollingPhantomClass: 'vb-scrolling-phantom',
                      el1DraggingClass: 'vb-dragging',
                      el1DraggingPhantomClass: 'vb-dragging-phantom',
  
                      el2Class: 'vb-content',
  
                      draggerClass: 'vb-dragger',
                      draggerStylerClass: 'vb-dragger-styler',
                  },
  
                  // reference to binding
                  binding: null,
  
                  // references to directive DOM elements
                  el1: null,
                  el2: null,
                  dragger: null,
  
                  // show dragger
                  draggerEnabled: null,
  
                  // properties computed for internal directive logic & DOM manipulations
                  visibleArea: 0, // ratio between container height and scrollable content height
                  scrollTop: 0, // position of content scrollTop in px
                  barTop: 0, // position of dragger in px
                  barHeight: 0, // height of dragger in px
                  mouseBarOffsetY: 0, // relative position of mouse at the time of clicking on dragger
                  barDragging: false, // when the dragger is used
  
                  // reference to MutationObserver
                  mutationObserver: null,
  
                  // references to timeouts for DOM class manipulation
                  scrollingClassTimeout: null,
                  draggingClassTimeout: null,
                  scrollingPhantomClassTimeout: null,
                  draggingPhantomClassTimeout: null,
  
                  // references to a functions we'll need when removing events
                  barMousedown: null,
                  documentMousemove: null,
                  documentMouseup: null,
                  windowResize: null,
                  scrollHandler: null,
                  wheelHandler: null,
  
              };
              return el._vuebarState;
          }
docs: /*------------------------------------*\
  Create State
  - contains default values
  \*------------------------------------