From d1e9ac1cedb91318f2e3a34282200c32d1b98daf Mon Sep 17 00:00:00 2001
From: David Kutugata <dakutuga@microsoft.com>
Date: Fri, 6 Sep 2019 10:33:47 -0700
Subject: [PATCH] =?UTF-8?q?Turned=20the=20check=20of=20the=20scroll=20at?=
 =?UTF-8?q?=20the=20bottom=20from=20=20=E2=80=A6=20checking=20equal=20to?=
 =?UTF-8?q?=20checking=20a=20range=20to=20make=20it=20work=20with=20fracti?=
 =?UTF-8?q?ons.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 news/2 Fixes/6580.md                          |  3 ++-
 .../history-react/MainPanel.tsx               | 24 +++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

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<IMainPanelProps, IMainPanelState>
     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<HTMLDivElement>) => {
-        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<IMainPanelProps, IMainPanelState>
         return false;
     }
 
+    private handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        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 = {