diff --git a/build/Table.js b/build/Table.js index e51179c..ad15c2c 100644 --- a/build/Table.js +++ b/build/Table.js @@ -487,19 +487,39 @@ 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进行判断 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 +1227,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..ed54056 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.3", "description": "Table ui component for react", "keywords": [ "react", diff --git a/src/Table.js b/src/Table.js index dcc1caa..5356367 100644 --- a/src/Table.js +++ b/src/Table.js @@ -276,18 +276,33 @@ 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进行判断 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 +1036,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; }