Update TODO; Fix scrollbar visible/invisible logic;

vuebar.js

@@ -1,20 +1,23 @@
 /*
 
-  TODO: Validate el1/el2 style attributes (prevent or warn about custom inline styles)
-  TODO: Check again if all references (this.ins/this.state/this.config) were refactored properly
-  TODO: Check of events are removed properly on destroy method
   TODO: min-height of scrollbar support
   TODO: revisit naming of state properties: especially scrollTop, barTop, barHeight
   TODO: performance: cache in state all properties that make render/reflow of document (like el2.offsetTop, etc.)
   TODO: add dragger min-height to default styles
   TODO: change name of dragger to something more fitting
   NOTE: take in consideration content height/width change between horizontal/vertical height/width calculations
   TODO: content min/max height support
-  TODO: reimplement override floating scrollbar option
+  TODO: reimplement replaceOverlayScrollbars (new overrideFloatingScrollbar) option
   TODO: don't overwrite vuebar element classess completely, use aC
   TODO: Site: add limitations (no tables, etc.) ?
-  TODO: There is a problem with hiding overlayed/0 scrollbars when in vertical+horizonal mode
+  TODO: There is a problem with hiding overlayed/0 scrollbars when in vertical+horizonal mode - maybe just add warning to replaceOverlayScrollbars option?
+  TODO: el1ScrollInvisibleClass/el1ScrollVisibleClass should be either for X or Y pane, not both
+
+  Upon Completion
+  TODO: Validate el1/el2 style attributes (prevent or warn about custom inline styles)
   TODO: SSR support / https://ssr.vuejs.org/en/universal.html#custom-directives
+  TODO: Check again if all references (this.ins/this.state/this.config) were refactored properly
+  TODO: Check if events are removed properly on destroy method
 
 */
 
@@ -44,7 +47,7 @@
       observerThrottle: 100,
       resizeDebounce: 100,
       unselectableBody: true,
-      overrideFloatingScrollbar: true,
+      //replaceOverlayScrollbars: false, // TODO
       scrollingPhantomDelay: 1000,
       draggingPhantomDelay: 1000,
       preventParentScroll: false,
@@ -65,6 +68,7 @@
       draggerYClass: 'vb-dragger-y',
       draggerXClass: 'vb-dragger-x',
 
+
     }
 
 
@@ -661,16 +665,31 @@
     this.updateDraggers = function(options){
       var options = options ? options : {};
 
-
       // do we need draggers visible?
-      var scrollbarsWanted = (this.state.y.visibleRatio<1 || this.state.x.visibleRatio<1) &&        this.state.nativeScrollbarSize;
-      if (!scrollbarsWanted) {
+      var scrollbarYWanted = !!this.state.nativeScrollbarSize && this.state.y.visibleRatio<1;
+      var scrollbarXWanted = !!this.state.nativeScrollbarSize && this.state.x.visibleRatio<1;
+
+      if (scrollbarYWanted) {
+        this.ins.draggerY.style.display = '';
+      } else {
         this.ins.draggerY.style.display = 'none';
+      }
+
+      if (scrollbarXWanted) {
+        this.ins.draggerX.style.display = '';
+      } else {
         this.ins.draggerX.style.display = 'none';
-        return;
+      }
+
+
+      if (scrollbarYWanted || scrollbarXWanted) {
+        this.util.rC(this.ins.el1, this.config.el1ScrollInvisibleClass);
+        this.util.aC(this.ins.el1, this.config.el1ScrollVisibleClass);
       } else {
-        this.ins.draggerY.style.display = '';
-        this.ins.draggerX.style.display = '';
+        this.util.rC(this.ins.el1, this.config.el1ScrollVisibleClass);
+        this.util.aC(this.ins.el1, this.config.el1ScrollInvisibleClass);
+        // we can stop here since we don't need calculations if scrollbars are not wanted at all
+        return;
       }
 
 
@@ -684,15 +703,6 @@
       //this.ins.draggerY.style.height = Math.ceil( this.state.y.barBaseHeight ) + 'px';
       //this.ins.draggerY.style.top = Math.ceil( this.state.y.barTop ) + 'px';
 
-      // scrollbar visible / invisible classes
-      if (this.state.y.visibleRatio<1) {
-        this.util.rC(this.ins.el1, this.config.el1ScrollInvisibleClass);
-        this.util.aC(this.ins.el1, this.config.el1ScrollVisibleClass);
-      } else {
-        this.util.rC(this.ins.el1, this.config.el1ScrollVisibleClass);
-        this.util.aC(this.ins.el1, this.config.el1ScrollInvisibleClass);
-      }
-
 
 
       if (options.withScrollingClasses) {