diff --git a/assets/index.less b/assets/index.less index 115861aee..22403037d 100644 --- a/assets/index.less +++ b/assets/index.less @@ -39,13 +39,19 @@ } &-fixed-header &-scroll &-header { - overflow-x: scroll; padding-bottom: 20px; margin-bottom: -20px; - overflow-y: scroll; + overflow: scroll; box-sizing: border-box; } + &-hide-scrollbar { + scrollbar-color: transparent transparent; + &::-webkit-scrollbar { + background-color: transparent; + } + } + // https://github.com/ant-design/ant-design/issues/10828 &-fixed-columns-in-body { visibility: hidden; diff --git a/src/BodyTable.js b/src/BodyTable.js index aaf39b9f5..53074b5b6 100644 --- a/src/BodyTable.js +++ b/src/BodyTable.js @@ -40,7 +40,7 @@ export default function BodyTable(props, { table }) { useFixedHeader = true; // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar(); + const scrollbarWidth = measureScrollbar({ prefixCls }); if (scrollbarWidth > 0 && fixed) { bodyStyle.marginBottom = `-${scrollbarWidth}px`; bodyStyle.paddingBottom = '0px'; diff --git a/src/HeadTable.js b/src/HeadTable.js index 80618f9c1..a94cb62d0 100644 --- a/src/HeadTable.js +++ b/src/HeadTable.js @@ -13,7 +13,7 @@ export default function HeadTable(props, { table }) { if (scroll.y) { useFixedHeader = true; // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar('horizontal'); + const scrollbarWidth = measureScrollbar({ direction: 'horizontal', prefixCls }); if (scrollbarWidth > 0 && !fixed) { headStyle.marginBottom = `-${scrollbarWidth}px`; headStyle.paddingBottom = '0px'; @@ -28,7 +28,7 @@ export default function HeadTable(props, { table }) {
diff --git a/src/utils.js b/src/utils.js index d16f71496..699f86e94 100644 --- a/src/utils.js +++ b/src/utils.js @@ -14,7 +14,7 @@ const scrollbarMeasure = { // This const is used for colgroup.col internal props. And should not provides to user. export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE'; -export function measureScrollbar(direction = 'vertical') { +export function measureScrollbar({ direction = 'vertical', prefixCls }) { if (typeof document === 'undefined' || typeof window === 'undefined') { return 0; } @@ -28,6 +28,8 @@ export function measureScrollbar(direction = 'vertical') { Object.keys(scrollbarMeasure).forEach(scrollProp => { scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp]; }); + // apply hide scrollbar className ahead + scrollDiv.className = `${prefixCls}-hide-scrollbar`; // Append related overflow style if (isVertical) { scrollDiv.style.overflowY = 'scroll';