diff --git a/public/app/core/components/NativeScrollbar.tsx b/public/app/core/components/NativeScrollbar.tsx
index cdf0fdfc07b..cca69d4c7c4 100644
--- a/public/app/core/components/NativeScrollbar.tsx
+++ b/public/app/core/components/NativeScrollbar.tsx
@@ -23,7 +23,7 @@ export default function NativeScrollbar({ children, onSetScrollRef, divId }: Pro
   return children;
 }
 
-class DivScrollElement {
+export class DivScrollElement implements ScrollRefElement {
   public constructor(private element: HTMLElement) {}
   public get scrollTop() {
     return this.element.scrollTop;
diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
index b558a1e2abb..adae0492c7e 100644
--- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx
@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { config, useChromeHeaderHeight } from '@grafana/runtime';
 import { useSceneObjectState } from '@grafana/scenes';
 import { ElementSelectionContext, useStyles2 } from '@grafana/ui';
-import NativeScrollbar from 'app/core/components/NativeScrollbar';
+import NativeScrollbar, { DivScrollElement } from 'app/core/components/NativeScrollbar';
 
 import { useSnappingSplitter } from '../panel-edit/splitter/useSnappingSplitter';
 import { DashboardScene } from '../scene/DashboardScene';
@@ -68,7 +68,7 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls
   }
 
   const onBodyRef = (ref: HTMLDivElement) => {
-    dashboard.onSetScrollRef(ref);
+    dashboard.onSetScrollRef(new DivScrollElement(ref));
   };
 
   return (