auto match scroll bar height

react-component · Jun 21, 2016 · febc578 · febc578
1 parent 5e1346b
commit febc578
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -13,7 +13,7 @@
 
   .@{tablePrefixCls}-scroll {
     overflow: auto;
-  }  
+  }
 
   .@{tablePrefixCls}-header {
     overflow: hidden;
@@ -27,10 +27,10 @@
 
   &-fixed-header &-body-inner {
     height: 100%;
-    overflow-y: scroll;
+    overflow: scroll;
   }
 
-  &-fixed-header &-header {
+  &-fixed-header &-scroll &-header {
     overflow-x: scroll;
     padding-bottom: 20px;
     margin-bottom: -20px;

diff --git a/src/Table.jsx b/src/Table.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import TableRow from './TableRow';
+import { measureScrollbar } from './utils';
 
 const Table = React.createClass({
   propTypes: {
@@ -344,6 +345,7 @@ const Table = React.createClass({
     const { prefixCls, scroll = {} } = this.props;
     let { useFixedHeader } = this.props;
     const bodyStyle = { ...this.props.bodyStyle };
+    const headStyle = {};
 
     let tableClassName = '';
     if (scroll.x || columns) {
@@ -355,6 +357,13 @@ const Table = React.createClass({
       bodyStyle.height = bodyStyle.height || scroll.y;
       bodyStyle.overflowY = bodyStyle.overflowY || 'auto';
       useFixedHeader = true;
+
+      // Add negative margin bottom for scroll bar overflow bug
+      const scrollbarWidth = measureScrollbar();
+      if (scrollbarWidth > 0) {
+        (fixed ? bodyStyle : headStyle).marginBottom = `-${scrollbarWidth}px`;
+        (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
+      }
     }
 
     const renderTable = (hasHead = true, hasBody = true) => {
@@ -386,6 +395,7 @@ const Table = React.createClass({
         <div
           className={`${prefixCls}-header`}
           ref={columns ? null : 'headTable'}
+          style={headStyle}
           onMouseEnter={this.detectScrollTarget}
           onScroll={this.handleBodyScroll}>
           {renderTable(true, false)}

diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1,27 @@
+let scrollbarWidth;
+
+// Measure scrollbar width for padding body during modal show/hide
+const scrollbarMeasure = {
+  position: 'absolute',
+  top: '-9999px',
+  width: '50px',
+  height: '50px',
+  overflow: 'scroll',
+};
+
+export function measureScrollbar() {
+  if (scrollbarWidth) {
+    return scrollbarWidth;
+  }
+  const scrollDiv = document.createElement('div');
+  for (const scrollProp in scrollbarMeasure) {
+    if (scrollbarMeasure.hasOwnProperty(scrollProp)) {
+      scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
+    }
+  }
+  document.body.appendChild(scrollDiv);
+  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+  scrollbarWidth = width;
+  return scrollbarWidth;
+}