Merge pull request #2 from we-flow/structure-reformat

Scrollbar is in much better shape

Author: maxhudson

dist/index.js

@@ -112,9 +112,10 @@
 
       _this.onResize = _this.onResize.bind(_this);
       _this.onColumnResize = _this.onColumnResize.bind(_this);
+      _this.setScrollBarWrapperDims = _this.setScrollBarWrapperDims.bind(_this);
       _this.onScrollX = _this.onScrollX.bind(_this);
-      _this.scrollXScrollbar = _.debounce(_this.scrollXScrollbar.bind(_this), 100);
-      _this.scrollYScrollbar = _.debounce(_this.scrollYScrollbar.bind(_this), 100);
+      _this.scrollXScrollbar = _.throttle(_this.scrollXScrollbar.bind(_this), 30);
+      _this.scrollYScrollbar = _.throttle(_this.scrollYScrollbar.bind(_this), 30);
       return _this;
     }
 
@@ -139,6 +140,7 @@
 
           this.onResize();
           this.addScrollBarEventHandlers();
+          this.setScrollBarWrapperDims();
         }
       }
     }, {
@@ -191,11 +193,20 @@
         this.setColumnWidths();
         this.setScrollBarDims();
       }
+    }, {
+      key: 'setScrollBarWrapperDims',
+      value: function setScrollBarWrapperDims() {
+        this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.clientWidth + 'px)';
+        this.xScrollbar.style.left = this.stickyColumn.clientWidth + 'px';
+
+        this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.clientHeight + 'px)';
+        this.yScrollbar.style.top = this.stickyHeader.clientHeight + 'px';
+      }
     }, {
       key: 'setScrollBarDims',
       value: function setScrollBarDims() {
-        this.table.querySelector('#x-scrollbar div').style.width = this.getSizeWithoutBoxSizing(this.realTable.firstChild).width + 'px';
-        this.table.querySelector('#y-scrollbar div').style.height = this.getSizeWithoutBoxSizing(this.realTable).height + 'px';
+        this.xScrollbar.firstChild.style.width = this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.clientWidth + 'px';
+        this.yScrollbar.firstChild.style.height = this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.clientHeight + 'px';
       }
     }, {
       key: 'onColumnResize',
@@ -212,6 +223,7 @@
         }
 
         this.onResize();
+        this.setScrollBarWrapperDims();
       }
     }, {
       key: 'setRowHeights',

dist/react-sticky-table.css

@@ -43,6 +43,16 @@
   height: 100%;
   overflow-y: auto;
 }
+/*
+Hack to make table paint on it's own layer.
+Because of this it won't paint when the scrollbar paints.
+This one was crucial for performance.
+Scrolling is probably 10-20x smoother.
+*/
+.sticky-table .sticky-table-x-wrapper .table{
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
 
 /* Scrollbars */
 .sticky-table-y-wrapper::-webkit-scrollbar, .sticky-table-x-wrapper::-webkit-scrollbar {
@@ -53,6 +63,8 @@
   background-color: transparent;
   z-index: 5;
   overflow: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 .sticky-table #x-scrollbar {
   left: 0px;

src/index.js

@@ -30,9 +30,10 @@ class StickyTable extends Component {
 
     this.onResize = this.onResize.bind(this);
     this.onColumnResize = this.onColumnResize.bind(this);
+    this.setScrollBarWrapperDims = this.setScrollBarWrapperDims.bind(this);
     this.onScrollX = this.onScrollX.bind(this);
-    this.scrollXScrollbar = _.debounce(this.scrollXScrollbar.bind(this), 100);
-    this.scrollYScrollbar = _.debounce(this.scrollYScrollbar.bind(this), 100);
+    this.scrollXScrollbar = _.throttle(this.scrollXScrollbar.bind(this), 30);
+    this.scrollYScrollbar = _.throttle(this.scrollYScrollbar.bind(this), 30);
   }
 
   componentDidMount() {
@@ -54,6 +55,7 @@ class StickyTable extends Component {
 
       this.onResize();
       this.addScrollBarEventHandlers();
+      this.setScrollBarWrapperDims();
     }
   }
 
@@ -106,9 +108,17 @@ class StickyTable extends Component {
     this.setScrollBarDims();
   }
 
+  setScrollBarWrapperDims() {
+    this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.clientWidth + 'px)';
+    this.xScrollbar.style.left = this.stickyColumn.clientWidth + 'px';
+
+    this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.clientHeight + 'px)';
+    this.yScrollbar.style.top = this.stickyHeader.clientHeight + 'px';
+  }
+
   setScrollBarDims() {
-    this.table.querySelector('#x-scrollbar div').style.width = this.getSizeWithoutBoxSizing(this.realTable.firstChild).width + 'px';
-    this.table.querySelector('#y-scrollbar div').style.height = this.getSizeWithoutBoxSizing(this.realTable).height + 'px';
+    this.xScrollbar.firstChild.style.width = (this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.clientWidth) + 'px';
+    this.yScrollbar.firstChild.style.height = (this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.clientHeight) + 'px';
   }
 
   /**
@@ -128,6 +138,7 @@ class StickyTable extends Component {
     }
 
     this.onResize();
+    this.setScrollBarWrapperDims();
   }
 
   /**

src/sticky-table.css

@@ -34,6 +34,16 @@
   height: 100%;
   overflow-y: auto;
 }
+/*
+Hack to make table paint on it's own layer.
+Because of this it won't paint when the scrollbar paints.
+This one was crucial for performance.
+Scrolling is probably 10-20x smoother.
+*/
+.sticky-table .sticky-table-x-wrapper .table{
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
 
 /* Scrollbars */
 .sticky-table-y-wrapper::-webkit-scrollbar, .sticky-table-x-wrapper::-webkit-scrollbar {
@@ -44,6 +54,8 @@
   background-color: transparent;
   z-index: 5;
   overflow: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
 .sticky-table #x-scrollbar {
   left: 0px;