Fix scrolling in the interactive window

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

@@ -354,11 +354,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

@@ -32,12 +32,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> {
                         {this.renderCells()}
                     </div>
                 </div>
-                <div ref={this.bottomRef} />
+                <div id="bottomDiv" ref={this.bottomRef} />
             </div>
         );
     }