Fix scrolling in the interactive window (#10319)

Author: rchiodo

news/2 Fixes/10137.md

@@ -0,0 +1 @@
+Fix scrolling for output to consistently scroll even during execution.

src/datascience-ui/history-react/interactivePanel.tsx

@@ -355,11 +355,8 @@ ${buildSettingsCss(this.props.settings)}`}</style>
             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)
-            // tslint:disable: no-any
-            if ((div as any).scrollIntoViewIfNeeded) {
-                (div as any).scrollIntoViewIfNeeded(false);
-            } else if (div && div.scrollIntoView) {
-                div.scrollIntoView(false);
+            if (div && div.scrollIntoView) {
+                div.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
             }
         }
     };

src/datascience-ui/history-react/redux/reducers/effects.ts

@@ -113,8 +113,7 @@ export namespace Effects {
             newVMs[index] = { ...newVMs[index], scrollCount: newVMs[index].scrollCount + 1 };
             return {
                 ...arg.prevState,
-                cellVMs: newVMs,
-                isAtBottom: false
+                cellVMs: newVMs
             };
         }
 

src/datascience-ui/interactive-common/contentPanel.tsx

@@ -34,12 +34,10 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
     constructor(prop: IContentPanelProps) {
         super(prop);
     }
-
     public componentDidMount() {
         this.scrollToBottom();
     }
-
-    public componentDidUpdate() {
+    public componentWillReceiveProps() {
         this.scrollToBottom();
     }
 
@@ -58,7 +56,7 @@ export class ContentPanel extends React.Component<IContentPanelProps> {
                 <div id="cell-table" role="list">
                     {this.renderCells()}
                 </div>
-                <div ref={this.bottomRef} />
+                <div id="bottomDiv" ref={this.bottomRef} />
             </div>
         );
     }