From c1530a9b365b2bb41ae840b35813e6fc90369e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E5=A5=87=E8=BE=89?= Date: Tue, 4 Jul 2017 18:43:21 +0800 Subject: [PATCH 1/4] =?UTF-8?q?Table=20scroll=20=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E3=80=82=E4=BF=AE=E5=A4=8D=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Table.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index 3ae08585f..900bb2111 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -689,9 +689,6 @@ export default class Table extends React.Component { handleBodyScroll = (e) => { // Prevent scrollTop setter trigger onScroll event // http://stackoverflow.com/q/1386696 - if (e.target !== this.scrollTarget) { - return; - } const { scroll = {} } = this.props; const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) { @@ -702,7 +699,7 @@ export default class Table extends React.Component { } this.setScrollPositionClassName(e.target); } - if (scroll.y) { + if (scroll.y && e.target !== headTable) { if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) { fixedColumnsBodyLeft.scrollTop = e.target.scrollTop; } From 9da2d21a379bf8728e2f555597e31c0f36c79994 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E5=A5=87=E8=BE=89?= Date: Wed, 19 Jul 2017 13:32:10 +0800 Subject: [PATCH 2/4] Remember last scrollLeft and scrollTop for scroll direction detecting. --- src/Table.jsx | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index 900bb2111..4a995f148 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -497,8 +497,6 @@ export default class Table extends React.Component { className={`${prefixCls}-header`} ref={fixed ? null : 'headTable'} style={headStyle} - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} onScroll={this.handleBodyScroll} > {renderTable(true, false)} @@ -512,8 +510,6 @@ export default class Table extends React.Component { className={`${prefixCls}-body`} style={bodyStyle} ref="bodyTable" - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} onScroll={this.handleBodyScroll} > {renderTable(!useFixedHeader)} @@ -539,8 +535,6 @@ export default class Table extends React.Component { className={`${prefixCls}-body-inner`} style={innerBodyStyle} ref={refName} - onMouseOver={this.detectScrollTarget} - onTouchStart={this.detectScrollTarget} onScroll={this.handleBodyScroll} > {renderTable(!useFixedHeader)} @@ -675,23 +669,15 @@ export default class Table extends React.Component { return typeof this.findExpandedRow(record, index) !== 'undefined'; } - detectScrollTarget = (e) => { - if (this.scrollTarget !== e.currentTarget) { - this.scrollTarget = e.currentTarget; - } - } - hasScrollX() { const { scroll = {} } = this.props; return 'x' in scroll; } handleBodyScroll = (e) => { - // Prevent scrollTop setter trigger onScroll event - // http://stackoverflow.com/q/1386696 const { scroll = {} } = this.props; const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; - if (scroll.x && e.target.scrollLeft !== this.lastScrollLeft) { + if (e.target.scrollLeft !== this.lastScrollLeft && scroll.x) { if (e.target === bodyTable && headTable) { headTable.scrollLeft = e.target.scrollLeft; } else if (e.target === headTable && bodyTable) { @@ -699,7 +685,7 @@ export default class Table extends React.Component { } this.setScrollPositionClassName(e.target); } - if (scroll.y && e.target !== headTable) { + if (e.target.scrollTop !== this.lastScrollTop && scroll.y && e.target !== headTable) { if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) { fixedColumnsBodyLeft.scrollTop = e.target.scrollTop; } @@ -710,8 +696,9 @@ export default class Table extends React.Component { bodyTable.scrollTop = e.target.scrollTop; } } - // Remember last scrollLeft for scroll direction detecting. + // Remember last scrollLeft and scrollTop for scroll direction detecting. this.lastScrollLeft = e.target.scrollLeft; + this.lastScrollTop = e.target.scrollTop; } handleRowHover = (isHover, key) => { From e8d0f9b0a4d15a440e15730f6ad4f6afaad3a8fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E5=A5=87=E8=BE=89?= Date: Wed, 19 Jul 2017 15:33:13 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=8A=96=E5=8A=A8?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Table.jsx | 50 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index 4a995f148..c3df95675 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -497,7 +497,7 @@ export default class Table extends React.Component { className={`${prefixCls}-header`} ref={fixed ? null : 'headTable'} style={headStyle} - onScroll={this.handleBodyScroll} + onScroll={this.handleBodyScrollLeft} > {renderTable(true, false)} @@ -674,31 +674,45 @@ export default class Table extends React.Component { return 'x' in scroll; } - handleBodyScroll = (e) => { + handleBodyScrollLeft = (e) => { + const target = e.target; const { scroll = {} } = this.props; - const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; - if (e.target.scrollLeft !== this.lastScrollLeft && scroll.x) { - if (e.target === bodyTable && headTable) { - headTable.scrollLeft = e.target.scrollLeft; - } else if (e.target === headTable && bodyTable) { - bodyTable.scrollLeft = e.target.scrollLeft; + const { headTable, bodyTable } = this.refs; + if (target.scrollLeft !== this.lastScrollLeft && scroll.x) { + if (target === bodyTable && headTable) { + headTable.scrollLeft = target.scrollLeft; + } else if (target === headTable && bodyTable) { + bodyTable.scrollLeft = target.scrollLeft; } - this.setScrollPositionClassName(e.target); + this.setScrollPositionClassName(target); } - if (e.target.scrollTop !== this.lastScrollTop && scroll.y && e.target !== headTable) { - if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) { - fixedColumnsBodyLeft.scrollTop = e.target.scrollTop; + } + + handleBodyScrollTop = (e) => { + const target = e.target; + const { scroll = {} } = this.props; + const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs; + if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) { + const scrollTop = target.scrollTop; + if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) { + fixedColumnsBodyLeft.scrollTop = scrollTop; } - if (fixedColumnsBodyRight && e.target !== fixedColumnsBodyRight) { - fixedColumnsBodyRight.scrollTop = e.target.scrollTop; + if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) { + fixedColumnsBodyRight.scrollTop = scrollTop; } - if (bodyTable && e.target !== bodyTable) { - bodyTable.scrollTop = e.target.scrollTop; + if (bodyTable && target !== bodyTable) { + bodyTable.scrollTop = scrollTop; } } + } + + handleBodyScroll = (e) => { + const target = e.target; + this.handleBodyScrollLeft(e); + this.handleBodyScrollTop(e); // Remember last scrollLeft and scrollTop for scroll direction detecting. - this.lastScrollLeft = e.target.scrollLeft; - this.lastScrollTop = e.target.scrollTop; + this.lastScrollLeft = target.scrollLeft; + this.lastScrollTop = target.scrollTop; } handleRowHover = (isHover, key) => { From 6bc2818f285c11be2a500aafb4444ca0561c958d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E5=A5=87=E8=BE=89?= Date: Wed, 19 Jul 2017 15:39:50 +0800 Subject: [PATCH 4/4] =?UTF-8?q?lastScrollLeft=20lastScrollTop=20=E5=AD=98?= =?UTF-8?q?=E5=82=A8=E8=AE=BE=E5=AE=9A=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Table.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Table.jsx b/src/Table.jsx index c3df95675..e0e4e9349 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -686,6 +686,8 @@ export default class Table extends React.Component { } this.setScrollPositionClassName(target); } + // Remember last scrollLeft for scroll direction detecting. + this.lastScrollLeft = target.scrollLeft; } handleBodyScrollTop = (e) => { @@ -704,15 +706,13 @@ export default class Table extends React.Component { bodyTable.scrollTop = scrollTop; } } + // Remember last scrollTop for scroll direction detecting. + this.lastScrollTop = target.scrollTop; } handleBodyScroll = (e) => { - const target = e.target; this.handleBodyScrollLeft(e); this.handleBodyScrollTop(e); - // Remember last scrollLeft and scrollTop for scroll direction detecting. - this.lastScrollLeft = target.scrollLeft; - this.lastScrollTop = target.scrollTop; } handleRowHover = (isHover, key) => {