diff --git a/news/2 Fixes/6580.md b/news/2 Fixes/6580.md index aa561e6c0150..690c8678cec1 100644 --- a/news/2 Fixes/6580.md +++ b/news/2 Fixes/6580.md @@ -3,4 +3,5 @@ Still the interactive window will snap to the bottom if you already are at the b Tested to work with: - regular code - dataframes -- big and regular plots \ No newline at end of file +- big and regular plots +Turned the check of the scroll at the bottom from checking equal to checking a range to make it work with fractions. \ No newline at end of file diff --git a/src/datascience-ui/history-react/MainPanel.tsx b/src/datascience-ui/history-react/MainPanel.tsx index c8d9af4f3fd6..46d7d1474184 100644 --- a/src/datascience-ui/history-react/MainPanel.tsx +++ b/src/datascience-ui/history-react/MainPanel.tsx @@ -169,20 +169,12 @@ export class MainPanel extends React.Component public scrollDiv = (div: HTMLDivElement) => { if (this.state.isAtBottom) { this.internalScrollCount += 1; + // Force auto here as smooth scrolling can be canceled by updates to the window + // from elsewhere (and keeping track of these would make this hard to maintain) div.scrollIntoView({ behavior: 'auto', block: 'start', inline: 'nearest' }); } } - public handleScroll = (e: React.UIEvent) => { - if (this.internalScrollCount > 0) { - this.internalScrollCount -= 1; - } else { - this.setState({ - isAtBottom: e.currentTarget.scrollHeight - e.currentTarget.scrollTop === e.currentTarget.clientHeight - }); - } - } - // tslint:disable-next-line:no-any cyclomatic-complexity max-func-body-length public handleMessage = (msg: string, payload?: any) => { switch (msg) { @@ -287,6 +279,18 @@ export class MainPanel extends React.Component return false; } + private handleScroll = (e: React.UIEvent) => { + if (this.internalScrollCount > 0) { + this.internalScrollCount -= 1; + } else { + const currentHeight = e.currentTarget.scrollHeight - e.currentTarget.scrollTop; + const isAtBottom = currentHeight < e.currentTarget.clientHeight + 2 && currentHeight > e.currentTarget.clientHeight - 2; + this.setState({ + isAtBottom + }); + } + } + // Uncomment this to use for debugging messages. Add a call to this to stick in dummy sys info messages. // private addDebugMessageCell(message: string) { // const cell: ICell = {