From abf567d6dab8b84d40e1b87b10547e60e54bc54c Mon Sep 17 00:00:00 2001 From: gx-mac Date: Mon, 1 Mar 2021 02:04:13 +0800 Subject: [PATCH 1/4] fix: scrollbar css --- src/Table.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/Table.js b/src/Table.js index dcc1caa..c550dbb 100644 --- a/src/Table.js +++ b/src/Table.js @@ -286,8 +286,12 @@ class Table extends Component { // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断 this.isShowScrollY(); if (this.bodyTable) { - if (!this.props.scroll.x && window.getComputedStyle(this.bodyTable).overflowX !== 'hidden') { - this.bodyTable.style.overflowX = 'hidden' + const currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX + if (!this.props.scroll.x && currentOverflowX === 'scroll') { + this.bodyTable.style.overflowX = 'hidden'; + } + if (this.props.scroll.x && currentOverflowX !== 'scroll') { + this.bodyTable.style.overflowX = 'scroll'; } } if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条 @@ -1021,6 +1025,9 @@ class Table extends Component { // bodyStyle.height = bodyStyle.height || scroll.y; innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; + if (scroll.x) { + innerBodyStyle.overflowX = 'scroll'; + } } else { bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; } From 6b8ad2414ea8572b6b439a2975d761d19b7d6f19 Mon Sep 17 00:00:00 2001 From: gx-mac Date: Mon, 1 Mar 2021 02:07:39 +0800 Subject: [PATCH 2/4] fix: scrollbar issue --- build/Table.js | 9 ++++++++- package.json | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/build/Table.js b/build/Table.js index e51179c..0cdd77f 100644 --- a/build/Table.js +++ b/build/Table.js @@ -497,9 +497,13 @@ var Table = function (_Component) { // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断 this.isShowScrollY(); if (this.bodyTable) { - if (!this.props.scroll.x && window.getComputedStyle(this.bodyTable).overflowX !== 'hidden') { + var currentOverflowX = window.getComputedStyle(this.bodyTable).overflowX; + if (!this.props.scroll.x && currentOverflowX === 'scroll') { this.bodyTable.style.overflowX = 'hidden'; } + if (this.props.scroll.x && currentOverflowX !== 'scroll') { + this.bodyTable.style.overflowX = 'scroll'; + } } if (this.bodyTableOuter) { // 隐藏几个不需要真正滚动的父元素的滚动条 @@ -1207,6 +1211,9 @@ var Table = function (_Component) { // bodyStyle.height = bodyStyle.height || scroll.y; innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; + if (scroll.x) { + innerBodyStyle.overflowX = 'scroll'; + } } else { bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; } diff --git a/package.json b/package.json index 297de21..df701dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "2.3.15-beta.1", + "version": "2.3.15-beta.2", "description": "Table ui component for react", "keywords": [ "react", From 06a8d7f6ff842c98f313c8cc2ef5bd0fc75b9209 Mon Sep 17 00:00:00 2001 From: gx-mac Date: Tue, 2 Mar 2021 16:37:36 +0800 Subject: [PATCH 3/4] fix: recalculate scrolltop when scroll.y changes --- src/Table.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/Table.js b/src/Table.js index c550dbb..5356367 100644 --- a/src/Table.js +++ b/src/Table.js @@ -276,11 +276,22 @@ class Table extends Component { if (prevScrollY && currentScrollY && (prevScrollY !== currentScrollY) && this.props.lazyLoad && !this.props.ignoreScrollYChange) { this.bodyTable.scrollTop = 0 } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && (prevScrollY !== currentScrollY)) { - const distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY) - if (distance < 0) { - this.bodyTable.scrollTop = 0 + const bodyScrollTop = this.bodyTable.scrollTop + if (bodyScrollTop === 0) { // 在顶部的时候，滚动条不用动 + this.bodyTable.scrollTop = 0; } else { - this.bodyTable.scrollTop = distance + const distance = bodyScrollTop + currentScrollY - prevScrollY; + if (distance < 0) { + this.bodyTable.scrollTop = 0; + } else { + const { scrollHeight, scrollTop } = this.bodyTable + const bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY) // 在最底部的时候也不用滚动滚动条 + if (bottomDistance < 5) { // 有些dom计算不是十分精确，设置一个值来缓冲一下 + this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY + } else { + this.bodyTable.scrollTop = distance; + } + } } } // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断 From cb7d54be8026993d4170fe952c65cfd4d95ddd2b Mon Sep 17 00:00:00 2001 From: gx-mac Date: Tue, 2 Mar 2021 16:40:03 +0800 Subject: [PATCH 4/4] fix: update --- build/Table.js | 22 +++++++++++++++++++--- package.json | 2 +- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/build/Table.js b/build/Table.js index 0cdd77f..ad15c2c 100644 --- a/build/Table.js +++ b/build/Table.js @@ -487,11 +487,27 @@ var Table = function (_Component) { if (prevScrollY && currentScrollY && prevScrollY !== currentScrollY && this.props.lazyLoad && !this.props.ignoreScrollYChange) { this.bodyTable.scrollTop = 0; } else if (this.props.ignoreScrollYChange && currentScrollY && prevScrollY && prevScrollY !== currentScrollY) { - var distance = this.bodyTable.scrollTop + (currentScrollY - prevScrollY); - if (distance < 0) { + var bodyScrollTop = this.bodyTable.scrollTop; + if (bodyScrollTop === 0) { + // 在顶部的时候，滚动条不用动 this.bodyTable.scrollTop = 0; } else { - this.bodyTable.scrollTop = distance; + var distance = bodyScrollTop + currentScrollY - prevScrollY; + if (distance < 0) { + this.bodyTable.scrollTop = 0; + } else { + var _bodyTable = this.bodyTable, + scrollHeight = _bodyTable.scrollHeight, + scrollTop = _bodyTable.scrollTop; + + var bottomDistance = Math.abs(scrollHeight - scrollTop - prevScrollY); // 在最底部的时候也不用滚动滚动条 + if (bottomDistance < 5) { + // 有些dom计算不是十分精确，设置一个值来缓冲一下 + this.bodyTable.scrollTop = scrollTop + prevScrollY - currentScrollY; + } else { + this.bodyTable.scrollTop = distance; + } + } } } // 是否传入 scroll中的y属性，如果传入判断是否是整数，如果是则进行比较 。bodyTable 的clientHeight进行判断 diff --git a/package.json b/package.json index df701dd..ed54056 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bee-table", - "version": "2.3.15-beta.2", + "version": "2.3.15-beta.3", "description": "Table ui component for react", "keywords": [ "react",