diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx
index 9d784f45682..14af0b1c97d 100644
--- a/public/app/features/query/components/QueryGroup.tsx
+++ b/public/app/features/query/components/QueryGroup.tsx
@@ -12,15 +12,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
-import {
-  Button,
-  CustomScrollbar,
-  HorizontalGroup,
-  InlineFormLabel,
-  Modal,
-  ScrollbarPosition,
-  stylesFactory,
-} from '@grafana/ui';
+import { Button, CustomScrollbar, HorizontalGroup, InlineFormLabel, Modal, stylesFactory } from '@grafana/ui';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import config from 'app/core/config';
 import { backendSrv } from 'app/core/services/backend_srv';
@@ -52,10 +44,10 @@ interface State {
   isLoadingHelp: boolean;
   isPickerOpen: boolean;
   isAddingMixed: boolean;
-  scrollTop: number;
   data: PanelData;
   isHelpOpen: boolean;
   defaultDataSource?: DataSourceApi;
+  scrollElement?: HTMLDivElement;
 }
 
 export class QueryGroup extends PureComponent<Props, State> {
@@ -69,7 +61,6 @@ export class QueryGroup extends PureComponent<Props, State> {
     isPickerOpen: false,
     isAddingMixed: false,
     isHelpOpen: false,
-    scrollTop: 0,
     queries: [],
     data: {
       state: LoadingState.NotStarted,
@@ -162,7 +153,11 @@ export class QueryGroup extends PureComponent<Props, State> {
   };
 
   onScrollBottom = () => {
-    this.setState({ scrollTop: 1000 });
+    setTimeout(() => {
+      if (this.state.scrollElement) {
+        this.state.scrollElement.scrollTo({ top: 10000 });
+      }
+    }, 20);
   };
 
   onUpdateAndRun = (options: QueryGroupOptions) => {
@@ -250,7 +245,7 @@ export class QueryGroup extends PureComponent<Props, State> {
 
   onAddMixedQuery = (datasource: any) => {
     this.onAddQuery({ datasource: datasource.name });
-    this.setState({ isAddingMixed: false, scrollTop: this.state.scrollTop + 10000 });
+    this.setState({ isAddingMixed: false });
   };
 
   onMixedPickerBlur = () => {
@@ -263,10 +258,6 @@ export class QueryGroup extends PureComponent<Props, State> {
     this.onScrollBottom();
   };
 
-  setScrollTop = ({ scrollTop }: ScrollbarPosition) => {
-    this.setState({ scrollTop: scrollTop });
-  };
-
   onQueriesChange = (queries: DataQuery[]) => {
     this.onChange({ queries });
     this.setState({ queries });
@@ -348,12 +339,16 @@ export class QueryGroup extends PureComponent<Props, State> {
     );
   }
 
+  setScrollRef = (scrollElement: HTMLDivElement): void => {
+    this.setState({ scrollElement });
+  };
+
   render() {
-    const { scrollTop, isHelpOpen, dsSettings } = this.state;
+    const { isHelpOpen, dsSettings } = this.state;
     const styles = getStyles();
 
     return (
-      <CustomScrollbar autoHeightMin="100%" scrollTop={scrollTop} setScrollTop={this.setScrollTop}>
+      <CustomScrollbar autoHeightMin="100%" scrollRefCallback={this.setScrollRef}>
         <div className={styles.innerWrapper}>
           {this.renderTopSection(styles)}
           {dsSettings && (
@@ -380,7 +375,6 @@ const getStyles = stylesFactory(() => {
     innerWrapper: css`
       display: flex;
       flex-direction: column;
-      height: 100%;
       padding: ${theme.spacing.md};
     `,
     dataSourceRow: css`