From 48afedf8164ce194299a71f7dd9550a27557ae1d Mon Sep 17 00:00:00 2001
From: Miguel Rincon <mrincon@gitlab.com>
Date: Wed, 22 Oct 2025 09:54:55 +0200
Subject: [PATCH] Refactor scroll utils and improve test coverage

- Refactors `scroll_utils.js` to improve maintainability and testability.
- Introduces `getScrollingElement` to abstract away the difference between
`window` and other scroll containers.
- Updates `scrollToTargetOnResize` to use the `scroll_utils` functions.
- Adds more unit tests for `scroll_utils.js`.
---
 .../components/access_token_table_app.vue     |   2 +-
 .../javascripts/lib/utils/resize_observer.js  |  34 +-
 .../javascripts/lib/utils/scroll_utils.js     | 120 +++--
 .../dom_shims/document_scrolling_element.js   |   3 +
 .../dom_shims/element_scroll_to.js            |  17 +-
 spec/frontend/__helpers__/dom_shims/index.js  |   1 +
 .../components/access_token_table_app_spec.js |   8 +-
 .../pipeline_editor_app_spec.js               |  14 +-
 .../components/error_tracking_list_spec.js    |   6 +-
 spec/frontend/groups/components/app_spec.js   |  14 +-
 .../lib/utils/resize_observer_spec.js         |  21 +-
 spec/frontend/lib/utils/scroll_utils_spec.js  | 442 +++++++-----------
 12 files changed, 293 insertions(+), 389 deletions(-)
 create mode 100644 spec/frontend/__helpers__/dom_shims/document_scrolling_element.js

diff --git a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
index 4c169b3bff56c3..3d0bb334c5b7d8 100644
--- a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
+++ b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
@@ -258,7 +258,7 @@ export default {
 
 <template>
   <dom-element-listener :selector="$options.FORM_SELECTOR" @[$options.EVENT_SUCCESS]="onSuccess">
-    <div ref="root-element">
+    <div ref="rootElement">
       <div>
         <gl-table
           data-testid="active-tokens"
diff --git a/app/assets/javascripts/lib/utils/resize_observer.js b/app/assets/javascripts/lib/utils/resize_observer.js
index f71748920db5d2..f76dd160e37d56 100644
--- a/app/assets/javascripts/lib/utils/resize_observer.js
+++ b/app/assets/javascripts/lib/utils/resize_observer.js
@@ -1,5 +1,5 @@
 import { contentTop } from './common_utils';
-import { findParentPanelScrollingEl } from './scroll_utils';
+import { getScrollingElement } from './scroll_utils';
 
 /**
  * Watches for change in size of a container element (e.g. for lazy-loaded images)
@@ -23,44 +23,24 @@ export function scrollToTargetOnResize({
   let currentScrollPosition = 0;
   let userScrollOffset = 0;
 
-  let hasCheckedForPanel = false;
-  let scrollingElement;
-
   // start listening to scroll after the first keepTargetAtTop call
   let scrollListenerEnabled = false;
   let intersectionObserver = null;
 
   const containerEl = document.querySelector(container);
 
-  function getScrollingElement() {
-    const projectStudioEnabled = window.gon?.features?.projectStudioEnabled;
-
-    if (projectStudioEnabled && hasCheckedForPanel) {
-      return scrollingElement;
-    }
-
-    if (projectStudioEnabled && targetElement) {
-      scrollingElement = findParentPanelScrollingEl(targetElement) || document.scrollingElement;
-      hasCheckedForPanel = true;
-    } else {
-      scrollingElement = document.scrollingElement;
-    }
-
-    return scrollingElement;
-  }
-
-  let { scrollHeight } = getScrollingElement();
+  let { scrollHeight } = getScrollingElement(targetElement);
 
   const ro = new ResizeObserver((entries) => {
     entries.forEach(() => {
-      scrollHeight = getScrollingElement().scrollHeight;
+      scrollHeight = getScrollingElement(targetElement).scrollHeight;
       // eslint-disable-next-line no-use-before-define
       keepTargetAtTop();
     });
   });
 
   function handleScroll() {
-    const diff = getScrollingElement().scrollHeight - scrollHeight;
+    const diff = getScrollingElement(targetElement).scrollHeight - scrollHeight;
     if (Math.abs(diff) > 100) {
       return;
     }
@@ -70,11 +50,11 @@ export function scrollToTargetOnResize({
   }
 
   function addScrollListener() {
-    window.addEventListener('scroll', handleScroll, { passive: true });
+    getScrollingElement(targetElement).addEventListener('scroll', handleScroll, { passive: true });
   }
 
   function removeScrollListener() {
-    window.removeEventListener('scroll', handleScroll);
+    getScrollingElement(targetElement).removeEventListener('scroll', handleScroll);
   }
 
   function setupIntersectionObserver() {
@@ -99,7 +79,7 @@ export function scrollToTargetOnResize({
     if (!targetElement) return;
 
     const anchorTop = targetElement.getBoundingClientRect().top;
-    const scroller = getScrollingElement();
+    const scroller = getScrollingElement(targetElement);
 
     currentScrollPosition = scroller.scrollTop;
 
diff --git a/app/assets/javascripts/lib/utils/scroll_utils.js b/app/assets/javascripts/lib/utils/scroll_utils.js
index fedd6f1f448e2d..cde29fad26f3dd 100644
--- a/app/assets/javascripts/lib/utils/scroll_utils.js
+++ b/app/assets/javascripts/lib/utils/scroll_utils.js
@@ -2,10 +2,44 @@ import $ from 'jquery';
 import { defer } from 'lodash';
 import { contentTop } from './common_utils';
 
-const SCROLL_CONTAINER_SELECTOR = '.js-static-panel-inner';
+const DEFAULT_PANEL_SELECTOR = '.js-static-panel';
+const DEFAULT_PANEL_SCROLL_CONTAINER_SELECTOR = '.js-static-panel-inner';
 
-const getScrollContainer = () => {
-  return document.querySelector(SCROLL_CONTAINER_SELECTOR);
+const DYNAMIC_PANEL_SELECTOR = '.js-dynamic-panel';
+const DYNAMIC_PANEL_SCROLL_CONTAINER_SELECTOR = '.js-dynamic-panel-inner';
+
+const getPanelScrollingElement = (contextElement) => {
+  if (!contextElement) {
+    // Return the default panel
+    return document.querySelector(DEFAULT_PANEL_SCROLL_CONTAINER_SELECTOR);
+  }
+
+  const staticPanel = contextElement.closest(DEFAULT_PANEL_SELECTOR);
+  if (staticPanel) {
+    return staticPanel.querySelector(DEFAULT_PANEL_SCROLL_CONTAINER_SELECTOR);
+  }
+
+  const dynamicPanel = contextElement.closest(DYNAMIC_PANEL_SELECTOR);
+  if (dynamicPanel) {
+    return dynamicPanel.querySelector(DYNAMIC_PANEL_SCROLL_CONTAINER_SELECTOR);
+  }
+
+  return null;
+};
+
+/**
+ * Finds a known scrolling element (inside panels) according to the element provided.
+ * If the element is not provided, it defaults to the default panel.
+ * If no panel is found, it returns document.scrollingElement.
+ *
+ * If `projectStudioEnabled` is disabled, it returns the document.scrollingElement.
+ */
+export const getScrollingElement = (contextElement) => {
+  if (window.gon?.features?.projectStudioEnabled) {
+    // We still return `document.scrollingElement` for pages that don't have panels, like login or error pages
+    return getPanelScrollingElement(contextElement) || document.scrollingElement;
+  }
+  return document.scrollingElement;
 };
 
 const getScrollBehavior = (behavior = 'smooth') => {
@@ -23,9 +57,9 @@ const getScrollBehavior = (behavior = 'smooth') => {
  *
  * @returns {Boolean}
  */
-export const isScrolledToBottom = (scrollContainer = getScrollContainer()) => {
+export const isScrolledToBottom = (contextElement) => {
   // Use clientHeight to account for any horizontal scrollbar.
-  const { scrollHeight, scrollTop, clientHeight } = scrollContainer || document.documentElement;
+  const { scrollHeight, scrollTop, clientHeight } = getScrollingElement(contextElement);
 
   // scrollTop can be a float, so round up to next integer.
   return Math.ceil(scrollTop + clientHeight) >= scrollHeight;
@@ -36,54 +70,36 @@ export const isScrolledToBottom = (scrollContainer = getScrollContainer()) => {
  *
  * @returns {Boolean}
  */
-export const isScrolledToTop = (scrollContainer = getScrollContainer()) => {
-  const { scrollTop } = scrollContainer || document.documentElement;
+export const isScrolledToTop = (contextElement) => {
+  const { scrollTop } = getScrollingElement(contextElement);
 
   return scrollTop === 0;
 };
 
-export const scrollDown = (scrollContainer = getScrollContainer()) => {
-  if (scrollContainer) {
-    scrollContainer.scrollTo({ top: scrollContainer.scrollHeight });
-  } else {
-    // eslint-disable-next-line no-restricted-properties
-    window.scrollTo({ top: document.body.scrollHeight });
-  }
+export const scrollDown = (contextElement) => {
+  const scrollingElement = getScrollingElement(contextElement);
+  const { scrollHeight } = scrollingElement;
+
+  scrollingElement.scrollTo({ top: scrollHeight });
 };
 
-export const scrollUp = (scrollContainer = getScrollContainer()) => {
-  if (scrollContainer) {
-    scrollContainer.scrollTo({ top: 0 });
-  } else {
-    // eslint-disable-next-line no-restricted-properties
-    window.scrollTo({ top: 0 });
-  }
+export const scrollUp = (contextElement) => {
+  getScrollingElement(contextElement).scrollTo({ top: 0 });
 };
 
 /**
- * @param {Element} element The element to find the parent panel scrolling element for.
- * @returns {Element | null}
+ * Scrolls to the top of the page with smooth behavior, respecting user's motion preferences.
  */
-export const findParentPanelScrollingEl = (element) => {
-  if (!element) return null;
-  const staticPanel = element.closest('.js-static-panel');
-  if (staticPanel) {
-    return staticPanel.querySelector('.js-static-panel-inner');
-  }
-  const dynamicPanel = element.closest('.js-dynamic-panel');
-  if (dynamicPanel) {
-    return dynamicPanel.querySelector('.js-dynamic-panel-inner');
-  }
-  return null;
+export const smoothScrollTop = (contextElement) => {
+  getScrollingElement(contextElement).scrollTo({ top: 0, behavior: getScrollBehavior() });
 };
 
 /**
  * @param {ScrollToOptions} options The options to pass to Element.scrollTo
  * @param {Element} element The element to use when searching for the correct scrolling element
  */
-export const scrollTo = (options, element) => {
-  const scroller = findParentPanelScrollingEl(element) || window;
-  scroller.scrollTo(options);
+export const scrollTo = (options, contextElement) => {
+  getScrollingElement(contextElement).scrollTo(options);
 };
 
 /**
@@ -96,7 +112,6 @@ export const scrollTo = (options, element) => {
  * @param {HTMLElement | String} [options.parent] The parent HTML element or query selector to scroll.
  */
 export const scrollToElement = (element, options = {}) => {
-  let scrollingEl = window;
   let el = element;
   if (element instanceof $) {
     // eslint-disable-next-line prefer-destructuring
@@ -104,9 +119,6 @@ export const scrollToElement = (element, options = {}) => {
   } else if (typeof el === 'string') {
     el = document.querySelector(element);
   }
-  if (window.gon?.features?.projectStudioEnabled) {
-    scrollingEl = findParentPanelScrollingEl(el) || window;
-  }
 
   if (el && el.getBoundingClientRect) {
     // In the previous implementation, jQuery naturally deferred this scrolling.
@@ -114,32 +126,16 @@ export const scrollToElement = (element, options = {}) => {
     defer(() => {
       const { offset = 0, parent } = options;
       const behavior = getScrollBehavior(options?.behavior);
-      const scrollTop = scrollingEl.scrollTop ?? scrollingEl.pageYOffset;
-      const y = el.getBoundingClientRect().top + scrollTop + offset - contentTop();
 
+      let scrollContainer = getScrollingElement(el);
       if (parent && typeof parent === 'string') {
-        scrollingEl = document.querySelector(parent);
+        scrollContainer = document.querySelector(parent);
       } else if (parent) {
-        scrollingEl = parent;
+        scrollContainer = parent;
       }
+      const y = el.getBoundingClientRect().top + scrollContainer.scrollTop + offset - contentTop();
 
-      scrollingEl.scrollTo({ top: y, behavior });
+      scrollContainer.scrollTo({ top: y, behavior });
     });
   }
 };
-
-/**
- * Scrolls with smooth behavior, respecting user's motion preferences.
- * @param {ScrollToOptions} [options] - Additional scroll options
- */
-export function smoothScrollTo(options) {
-  // eslint-disable-next-line no-restricted-properties -- we should remove this method and move to `scrollTo`.
-  window.scrollTo({ ...options, behavior: getScrollBehavior() });
-}
-
-/**
- * Scrolls to the top of the page with smooth behavior, respecting user's motion preferences.
- */
-export function smoothScrollTop() {
-  smoothScrollTo({ top: 0 });
-}
diff --git a/spec/frontend/__helpers__/dom_shims/document_scrolling_element.js b/spec/frontend/__helpers__/dom_shims/document_scrolling_element.js
new file mode 100644
index 00000000000000..7ca814e6629e20
--- /dev/null
+++ b/spec/frontend/__helpers__/dom_shims/document_scrolling_element.js
@@ -0,0 +1,3 @@
+// In standards mode, document.scrollingElement is the root element of the document: document.documentElement.
+// https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement
+document.scrollingElement = document.documentElement;
diff --git a/spec/frontend/__helpers__/dom_shims/element_scroll_to.js b/spec/frontend/__helpers__/dom_shims/element_scroll_to.js
index 68f8a115865bc9..a3f02ed03d6c61 100644
--- a/spec/frontend/__helpers__/dom_shims/element_scroll_to.js
+++ b/spec/frontend/__helpers__/dom_shims/element_scroll_to.js
@@ -1,6 +1,15 @@
-Element.prototype.scrollTo = jest.fn().mockImplementation(function scrollTo(x, y) {
-  this.scrollLeft = x;
-  this.scrollTop = y;
+// Stores individual mocks for each Element instance
+const scrollToMocks = new WeakMap();
 
-  this.dispatchEvent(new Event('scroll'));
+Object.defineProperty(Element.prototype, 'scrollTo', {
+  get() {
+    if (!scrollToMocks.has(this)) {
+      scrollToMocks.set(this, jest.fn());
+    }
+    return scrollToMocks.get(this);
+  },
+  set(fn) {
+    scrollToMocks.set(this, fn);
+  },
+  configurable: true,
 });
diff --git a/spec/frontend/__helpers__/dom_shims/index.js b/spec/frontend/__helpers__/dom_shims/index.js
index fb4d73ddf31563..c087b63eca34c2 100644
--- a/spec/frontend/__helpers__/dom_shims/index.js
+++ b/spec/frontend/__helpers__/dom_shims/index.js
@@ -2,6 +2,7 @@ import './clipboard';
 import './clipboard_event';
 import './create_object_url';
 import './data_transfer';
+import './document_scrolling_element';
 import './domrect';
 import './drag_event';
 import './element_scroll_by';
diff --git a/spec/frontend/access_tokens/components/access_token_table_app_spec.js b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
index e97f4b9c5c372f..148438e9543722 100644
--- a/spec/frontend/access_tokens/components/access_token_table_app_spec.js
+++ b/spec/frontend/access_tokens/components/access_token_table_app_spec.js
@@ -2,6 +2,7 @@ import { GlButton, GlModal, GlPagination, GlTable } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { scrollTo } from '~/lib/utils/scroll_utils';
 import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
 import { EVENT_SUCCESS, PAGE_SIZE } from '~/access_tokens/components/constants';
 import { createAlert, VARIANT_DANGER } from '~/alert';
@@ -11,6 +12,7 @@ import { sprintf } from '~/locale';
 import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
 
 jest.mock('~/alert');
+jest.mock('~/lib/utils/scroll_utils');
 
 describe('~/access_tokens/components/access_token_table_app', () => {
   let wrapper;
@@ -428,11 +430,10 @@ describe('~/access_tokens/components/access_token_table_app', () => {
           });
 
           it('scrolls to the top', async () => {
-            const scrollToSpy = jest.spyOn(window, 'scrollTo');
             await findPagination().vm.$emit('input', 2);
             await nextTick();
 
-            expect(scrollToSpy).toHaveBeenCalledWith({ top: 0 });
+            expect(scrollTo).toHaveBeenCalledWith({ top: 0 }, wrapper.vm.$refs.rootElement);
           });
         });
       });
@@ -517,11 +518,10 @@ describe('~/access_tokens/components/access_token_table_app', () => {
           it('scrolls to the top', async () => {
             await axios.waitForAll();
 
-            const scrollToSpy = jest.spyOn(window, 'scrollTo');
             await findPagination().vm.$emit('input', 2);
             await axios.waitForAll();
 
-            expect(scrollToSpy).toHaveBeenCalledWith({ top: 0 });
+            expect(scrollTo).toHaveBeenCalledWith({ top: 0 }, wrapper.vm.$refs.rootElement);
           });
         });
       });
diff --git a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
index 58a8fc51183028..293179cc496539 100644
--- a/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
+++ b/spec/frontend/ci/pipeline_editor/pipeline_editor_app_spec.js
@@ -7,6 +7,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import { HTTP_STATUS_INTERNAL_SERVER_ERROR } from '~/lib/utils/http_status';
+import { scrollTo } from '~/lib/utils/scroll_utils';
 import { objectToQuery, visitUrl } from '~/lib/utils/url_utility';
 import { resolvers } from '~/ci/pipeline_editor/graphql/resolvers';
 import PipelineEditorTabs from '~/ci/pipeline_editor/components/pipeline_editor_tabs.vue';
@@ -52,6 +53,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
   visitUrl: jest.fn(),
 }));
 
+jest.mock('~/lib/utils/scroll_utils');
+
 const defaultProvide = {
   ciConfigPath: mockCiConfigPath,
   defaultBranch: mockDefaultBranch,
@@ -340,7 +343,7 @@ describe('Pipeline editor app component', () => {
 
       it('does not report an error or scroll to the top', () => {
         expect(findAlert().exists()).toBe(false);
-        expect(window.scrollTo).not.toHaveBeenCalled();
+        expect(scrollTo).not.toHaveBeenCalled();
       });
     });
 
@@ -350,7 +353,6 @@ describe('Pipeline editor app component', () => {
 
       describe('and the commit mutation succeeds', () => {
         beforeEach(async () => {
-          window.scrollTo = jest.fn();
           await createComponentWithApollo({
             stubs: { PipelineEditorMessages },
             data: { currentBranch: mockDefaultBranch },
@@ -364,7 +366,7 @@ describe('Pipeline editor app component', () => {
         });
 
         it('scrolls to the top of the page to bring attention to the confirmation message', () => {
-          expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+          expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' }, wrapper.element);
         });
 
         it('polls for commit sha while pipeline data is not yet available for current branch', async () => {
@@ -438,7 +440,6 @@ describe('Pipeline editor app component', () => {
         const commitFailedReasons = ['Commit failed'];
 
         beforeEach(async () => {
-          window.scrollTo = jest.fn();
           await createComponentWithApollo({ stubs: { PipelineEditorMessages } });
 
           findEditorHome().vm.$emit('showError', {
@@ -454,7 +455,7 @@ describe('Pipeline editor app component', () => {
         });
 
         it('scrolls to the top of the page to bring attention to the error message', () => {
-          expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+          expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' }, wrapper.element);
         });
       });
 
@@ -462,7 +463,6 @@ describe('Pipeline editor app component', () => {
         const unknownReasons = ['Commit failed'];
 
         beforeEach(async () => {
-          window.scrollTo = jest.fn();
           await createComponentWithApollo({ stubs: { PipelineEditorMessages } });
 
           findEditorHome().vm.$emit('showError', {
@@ -478,7 +478,7 @@ describe('Pipeline editor app component', () => {
         });
 
         it('scrolls to the top of the page to bring attention to the error message', () => {
-          expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+          expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' }, wrapper.element);
         });
       });
     });
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 876885a01f6374..fbcdd90f924bda 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -14,6 +14,7 @@ import Vuex from 'vuex';
 import stubChildren from 'helpers/stub_children';
 import waitForPromises from 'helpers/wait_for_promises';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
+import { scrollTo } from '~/lib/utils/scroll_utils';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
 import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
 import TimelineChart from '~/error_tracking/components/timeline_chart.vue';
@@ -22,6 +23,8 @@ import errorsList from './list_mock.json';
 
 Vue.use(Vuex);
 
+jest.mock('~/lib/utils/scroll_utils');
+
 describe('ErrorTrackingList', () => {
   let store;
   let wrapper;
@@ -537,9 +540,8 @@ describe('ErrorTrackingList', () => {
         });
 
         it('fetches the next page of results', () => {
-          window.scrollTo = jest.fn();
           findPagination().vm.$emit('input', 2);
-          expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, left: 0 });
+          expect(scrollTo).toHaveBeenCalledWith({ top: 0, left: 0 }, wrapper.element);
           expect(actions.fetchPaginatedResults).toHaveBeenCalled();
           expect(actions.fetchPaginatedResults).toHaveBeenLastCalledWith(
             expect.anything(),
diff --git a/spec/frontend/groups/components/app_spec.js b/spec/frontend/groups/components/app_spec.js
index 3887ab2ce4a01e..c71b974b923852 100644
--- a/spec/frontend/groups/components/app_spec.js
+++ b/spec/frontend/groups/components/app_spec.js
@@ -4,6 +4,7 @@ import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
+import { scrollTo } from '~/lib/utils/scroll_utils';
 import appComponent from '~/groups/components/app.vue';
 import eventHub from '~/groups/event_hub';
 import GroupsService from '~/groups/service/groups_service';
@@ -34,6 +35,7 @@ const $toast = {
   show: jest.fn(),
 };
 jest.mock('~/alert');
+jest.mock('~/lib/utils/scroll_utils');
 
 describe('AppComponent', () => {
   let wrapper;
@@ -110,10 +112,9 @@ describe('AppComponent', () => {
       it('should show an alert when request fails', () => {
         mock.onGet('/dashboard/groups.json').reply(HTTP_STATUS_BAD_REQUEST);
 
-        jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
         return vm.fetchGroups({}).then(() => {
           expect(vm.isLoading).toBe(false);
-          expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
+          expect(scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 }, wrapper.element);
           expect(createAlert).toHaveBeenCalledWith({
             message: 'An error occurred. Please try again.',
           });
@@ -166,7 +167,6 @@ describe('AppComponent', () => {
       it('without filter should fetch groups for provided page details, update window state, and call setGroups', () => {
         jest.spyOn(urlUtilities, 'mergeUrlParams');
         jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
-        jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
         jest.spyOn(vm.store, 'setGroups').mockImplementation(() => {});
 
         const fetchPagePromise = vm.fetchPage({
@@ -185,7 +185,7 @@ describe('AppComponent', () => {
 
         return fetchPagePromise.then(() => {
           expect(vm.isLoading).toBe(false);
-          expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
+          expect(scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 }, wrapper.element);
           expect(urlUtilities.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, expect.any(String));
           expect(window.history.replaceState).toHaveBeenCalledWith(
             {
@@ -202,7 +202,6 @@ describe('AppComponent', () => {
       it('with filter should fetch groups for provided page details, update window state, and call setGroups', () => {
         jest.spyOn(urlUtilities, 'mergeUrlParams');
         jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
-        jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
         jest.spyOn(vm.store, 'setGroups').mockImplementation(() => {});
 
         const fetchPagePromise = vm.fetchPage({
@@ -221,7 +220,7 @@ describe('AppComponent', () => {
 
         return fetchPagePromise.then(() => {
           expect(vm.isLoading).toBe(false);
-          expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
+          expect(scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 }, wrapper.element);
           expect(urlUtilities.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, expect.any(String));
           expect(window.history.replaceState).toHaveBeenCalledWith(
             {
@@ -336,14 +335,13 @@ describe('AppComponent', () => {
         const notice = `You left the "${childGroupItem.fullName}" group.`;
         jest.spyOn(vm.service, 'leaveGroup').mockResolvedValue({ data: { notice } });
         jest.spyOn(vm.store, 'removeGroup');
-        jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
 
         vm.leaveGroup();
 
         expect(vm.targetGroup.isBeingRemoved).toBe(true);
         expect(vm.service.leaveGroup).toHaveBeenCalledWith(vm.targetGroup.leavePath);
         return waitForPromises().then(() => {
-          expect(window.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 });
+          expect(scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', top: 0 }, wrapper.element);
           expect(vm.store.removeGroup).toHaveBeenCalledWith(vm.targetGroup, vm.targetParentGroup);
           expect($toast.show).toHaveBeenCalledWith(notice);
         });
diff --git a/spec/frontend/lib/utils/resize_observer_spec.js b/spec/frontend/lib/utils/resize_observer_spec.js
index 5348ab8f035173..f280f544db4ddc 100644
--- a/spec/frontend/lib/utils/resize_observer_spec.js
+++ b/spec/frontend/lib/utils/resize_observer_spec.js
@@ -2,7 +2,10 @@ import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import { contentTop } from '~/lib/utils/common_utils';
 import { scrollToTargetOnResize } from '~/lib/utils/resize_observer';
 
-jest.mock('~/lib/utils/common_utils');
+jest.mock('~/lib/utils/common_utils', () => ({
+  ...jest.requireActual('~/lib/utils/common_utils'),
+  contentTop: jest.fn(),
+}));
 
 function mockStickyHeaderSize(val) {
   contentTop.mockReturnValue(val);
@@ -29,14 +32,8 @@ describe('scrollToTargetOnResize', () => {
 
     mockStickyHeaderSize(mockHeaderSize);
 
-    Object.defineProperty(document, 'scrollingElement', {
-      value: {
-        scrollTo: jest.fn(),
-        scrollTop: 0,
-        scrollHeight: 1000,
-      },
-      writable: true,
-    });
+    jest.spyOn(document.documentElement, 'scrollTop', 'get').mockReturnValue(0);
+    jest.spyOn(document.documentElement, 'scrollHeight', 'get').mockReturnValue(1000);
 
     setHTMLFixture(
       `<div id="content-body">
@@ -170,13 +167,13 @@ describe('scrollToTargetOnResize', () => {
         behavior: 'instant',
       });
 
-      document.scrollingElement.scrollTop = 100;
+      jest.spyOn(document.documentElement, 'scrollTop', 'get').mockReturnValue(100);
 
       jest
         .spyOn(document.getElementById('target-element'), 'getBoundingClientRect')
         .mockReturnValue({ top: 100 });
 
-      window.dispatchEvent(new Event('scroll'));
+      document.scrollingElement.dispatchEvent(new Event('scroll'));
 
       jest
         .spyOn(document.getElementById('target-element'), 'getBoundingClientRect')
@@ -323,7 +320,7 @@ describe('scrollToTargetOnResize', () => {
 
     document.scrollingElement.scrollTo.mockClear();
 
-    document.scrollingElement.scrollHeight = 1200;
+    jest.spyOn(document.documentElement, 'scrollHeight', 'get').mockReturnValue(1200);
 
     window.dispatchEvent(new Event('scroll'));
 
diff --git a/spec/frontend/lib/utils/scroll_utils_spec.js b/spec/frontend/lib/utils/scroll_utils_spec.js
index dfd5ee96f4c39e..e574d9eea858a8 100644
--- a/spec/frontend/lib/utils/scroll_utils_spec.js
+++ b/spec/frontend/lib/utils/scroll_utils_spec.js
@@ -4,61 +4,76 @@ import {
   scrollDown,
   scrollUp,
   scrollTo,
-  findParentPanelScrollingEl,
+  getScrollingElement,
   scrollToElement,
-  smoothScrollTo,
   smoothScrollTop,
 } from '~/lib/utils/scroll_utils';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
-const makePanelHtmlStub = (
-  outerClass = 'js-static-panel',
-  innerClass = 'js-static-panel-inner',
-) => {
-  return `<div class="${outerClass}">
-    <div class="${innerClass}" id="scroller">
-      <div id="test" />
-    </div>
-  </div>`;
-};
-
 describe('scroll utils', () => {
-  let windowScrollTo;
-  let elementScrollTo;
+  const findElem = () => document.querySelector('#element');
+  const findElemInDynamicPanel = () => document.querySelector('#element-in-dynamic-panel');
+  const findStaticPanelInner = () => document.querySelector('.js-static-panel-inner');
+  const findDynamicPanelInner = () => document.querySelector('.js-dynamic-panel-inner');
+  const findDocumentScrollingElement = () => document.scrollingElement;
+
+  const setupEnvironment = ({
+    projectStudioEnabled = false,
+    getBoundingClientRect,
+    ...getters
+  } = {}) => {
+    if (projectStudioEnabled) {
+      window.gon = { features: { projectStudioEnabled: true } };
+
+      setHTMLFixture(`
+        <div class="js-static-panel">
+          <div class="js-static-panel-inner">
+            <div id="element"></div>
+          </div>
+        </div>
+        <div class="js-dynamic-panel">
+          <div class="js-dynamic-panel-inner">
+            <div id="element-in-dynamic-panel"></div>
+          </div>
+        </div>
+      `);
+
+      Object.entries(getters).forEach(([name, value]) => {
+        jest.spyOn(findStaticPanelInner(), name, 'get').mockReturnValue(value);
+        jest.spyOn(findDynamicPanelInner(), name, 'get').mockReturnValue(value);
+      });
+    } else {
+      window.gon = { features: {} };
 
-  const setUpScrollEnvironment = ({ ...getters }) => {
-    Object.defineProperty(global.window, 'scrollTo', { value: windowScrollTo });
-    Object.defineProperty(Element.prototype, 'scrollTo', { value: elementScrollTo });
+      setHTMLFixture('<div id="scroller"><div id="element" /></div>');
 
-    Object.entries(getters).forEach(([name, value]) => {
-      jest.spyOn(Element.prototype, name, 'get').mockReturnValue(value);
-    });
-  };
+      Object.entries(getters).forEach(([name, value]) => {
+        jest.spyOn(findDocumentScrollingElement(), name, 'get').mockReturnValue(value);
+      });
+    }
 
-  const setUpContainer = () => {
-    setHTMLFixture('<div class="js-static-panel-inner">');
+    if (getBoundingClientRect) {
+      if (findElem()) {
+        jest.spyOn(findElem(), 'getBoundingClientRect').mockReturnValue(getBoundingClientRect);
+      }
+      if (findElemInDynamicPanel()) {
+        jest
+          .spyOn(findElemInDynamicPanel(), 'getBoundingClientRect')
+          .mockReturnValue(getBoundingClientRect);
+      }
+    }
   };
 
-  beforeEach(() => {
-    windowScrollTo = jest.fn();
-    elementScrollTo = jest.fn();
-  });
-
   afterEach(() => {
+    window.gon = { features: null };
     resetHTMLFixture();
   });
 
   describe.each`
-    case                                    | useContainer
+    case                                    | projectStudioEnabled
     ${'with window as scrolling container'} | ${true}
     ${'with panel as scrolling container'}  | ${false}
-  `('$case', ({ useContainer }) => {
-    beforeEach(() => {
-      if (useContainer) {
-        setUpContainer();
-      }
-    });
-
+  `('$case', ({ projectStudioEnabled }) => {
     describe('isScrolledToBottom', () => {
       it.each`
         context                                                           | scrollTop | scrollHeight | result
@@ -67,7 +82,7 @@ describe('scroll utils', () => {
         ${'returns true when scrolled to bottom with subpixel precision'} | ${999.25} | ${2000}      | ${true}
         ${'returns true when cannot scroll'}                              | ${0}      | ${500}       | ${true}
       `('$context', ({ scrollTop, scrollHeight, result }) => {
-        setUpScrollEnvironment({ scrollTop, clientHeight: 1000, scrollHeight });
+        setupEnvironment({ projectStudioEnabled, scrollTop, clientHeight: 1000, scrollHeight });
 
         expect(isScrolledToBottom()).toBe(result);
       });
@@ -79,7 +94,7 @@ describe('scroll utils', () => {
         ${'returns true when scrolled to top'}     | ${0}      | ${2000}      | ${true}
         ${'returns true when not scrolled to top'} | ${1000}   | ${2000}      | ${false}
       `('$context', ({ scrollTop, scrollHeight, result }) => {
-        setUpScrollEnvironment({ scrollTop, clientHeight: 1000, scrollHeight });
+        setupEnvironment({ projectStudioEnabled, scrollTop, clientHeight: 1000, scrollHeight });
 
         expect(isScrolledToTop()).toBe(result);
       });
@@ -88,285 +103,230 @@ describe('scroll utils', () => {
 
   describe('scrollDown', () => {
     it('scrolls container to top', () => {
-      setUpContainer();
-      setUpScrollEnvironment({ scrollHeight: 2000 });
+      setupEnvironment({ projectStudioEnabled: true, scrollHeight: 2000 });
 
       scrollDown();
 
-      expect(elementScrollTo).toHaveBeenCalledWith({ top: 2000 });
+      expect(findStaticPanelInner().scrollTo).toHaveBeenCalledWith({ top: 2000 });
     });
 
     it('scrolls window to top', () => {
-      setUpScrollEnvironment({ scrollHeight: 2000 });
+      setupEnvironment({ scrollHeight: 2000 });
 
       scrollDown();
 
-      expect(windowScrollTo).toHaveBeenCalledWith({ top: 2000 });
+      expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({ top: 2000 });
     });
   });
 
   describe('scrollUp', () => {
     it('scrolls container to top', () => {
-      setUpContainer();
-      setUpScrollEnvironment({ scrollHeight: 2000 });
+      setupEnvironment({ projectStudioEnabled: true, scrollHeight: 2000 });
 
       scrollUp();
 
-      expect(elementScrollTo).toHaveBeenCalledWith({ top: 0 });
+      expect(findStaticPanelInner().scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
 
     it('scrolls window to top', () => {
-      setUpScrollEnvironment({ scrollHeight: 2000 });
+      setupEnvironment({ scrollHeight: 2000 });
 
       scrollUp();
 
-      expect(windowScrollTo).toHaveBeenCalledWith({ top: 0 });
+      expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({ top: 0 });
     });
   });
 
   describe('scrollTo', () => {
     describe('when inside a panel', () => {
       it('calls `scrollTo` on the panel', () => {
-        document.body.innerHTML = makePanelHtmlStub();
-        const target = document.getElementById('test');
-        const scroller = document.getElementById('scroller');
-        const scrollerSpy = jest.spyOn(scroller, 'scrollTo');
+        setupEnvironment({ projectStudioEnabled: true });
 
-        scrollTo({ top: 0 }, target);
+        scrollTo({ top: 0 }, findElem());
 
-        expect(scrollerSpy).toHaveBeenCalledWith({ top: 0 });
+        expect(findStaticPanelInner().scrollTo).toHaveBeenCalledWith({ top: 0 });
       });
     });
     describe('when not inside a panel', () => {
       it('calls `scrollTo` on the window', () => {
-        const spy = jest.spyOn(window, 'scrollTo');
         scrollTo({ top: 0 }, document.body);
-        expect(spy).toHaveBeenCalledWith({ top: 0 });
+
+        expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({ top: 0 });
       });
     });
   });
 
-  describe('findParentPanelScrollingEl', () => {
-    afterEach(() => {
-      document.body.innerHTML = '';
-    });
-
+  describe('getScrollingElement', () => {
     it('handles null/undefined elements', () => {
-      expect(findParentPanelScrollingEl(null)).toBeNull();
-      expect(findParentPanelScrollingEl(undefined)).toBeNull();
+      setupEnvironment({ projectStudioEnabled: false });
+
+      expect(getScrollingElement(null)).toBe(document.scrollingElement);
+      expect(getScrollingElement(undefined)).toBe(document.scrollingElement);
     });
 
     describe('when element is inside a panel', () => {
       it.each`
-        panelType    | panelClass            | innerClass
-        ${'static'}  | ${'js-static-panel'}  | ${'js-static-panel-inner'}
-        ${'dynamic'} | ${'js-dynamic-panel'} | ${'js-dynamic-panel-inner'}
-      `('returns $panelType panel inner element', ({ panelClass, innerClass }) => {
-        document.body.innerHTML = makePanelHtmlStub(panelClass, innerClass);
+        panelType    | elementFinder             | innerClass
+        ${'static'}  | ${findElem}               | ${'js-static-panel-inner'}
+        ${'dynamic'} | ${findElemInDynamicPanel} | ${'js-dynamic-panel-inner'}
+      `('returns $panelType panel inner element', ({ elementFinder, innerClass }) => {
+        setupEnvironment({ projectStudioEnabled: true });
 
-        const element = document.getElementById('test');
-        const inner = document.querySelector(`.${innerClass}`);
+        const element = elementFinder();
+        const container = document.querySelector(`.${innerClass}`);
 
-        expect(findParentPanelScrollingEl(element)).toBe(inner);
+        expect(getScrollingElement(element)).toBe(container);
       });
     });
 
     describe('when element is not inside a proper panel', () => {
       it.each`
-        scenario      | html
-        ${'no panel'} | ${'<div id="test" />'}
-        ${'no inner'} | ${'<div class="js-static-panel"><div id="test" /></div>'}
-      `('returns null for $scenario', ({ html }) => {
-        document.body.innerHTML = html;
-        const element = document.getElementById('test');
-
-        expect(findParentPanelScrollingEl(element)).toBeNull();
+        scenario                 | html
+        ${'no panel'}            | ${'<div id="element" />'}
+        ${'no inner'}            | ${'<div class="js-static-panel"><div id="element"></div></div>'}
+        ${'no inner in dynamic'} | ${'<div class="js-dynamic-panel"><div id="element"></div></div>'}
+      `('returns window as fallback for $scenario', ({ html }) => {
+        window.gon = { features: { projectStudioEnabled: true } };
+        setHTMLFixture(html);
+
+        const element = document.getElementById('element');
+
+        expect(getScrollingElement(element)).toBe(document.scrollingElement);
       });
     });
   });
 
   describe('scrollToElement', () => {
-    let parentElem;
-    let elem;
-    const windowHeight = 550;
     const elemTop = 100;
-    const parentId = 'parent_scroll_test';
-    const id = 'scroll_test';
-
-    beforeEach(() => {
-      parentElem = document.createElement('div');
-      parentElem.id = parentId;
-      elem = document.createElement('div');
-      elem.id = id;
-      parentElem.appendChild(elem);
-      document.body.appendChild(parentElem);
-
-      window.innerHeight = windowHeight;
-      window.mrTabs = { currentAction: 'show' };
-
-      jest.spyOn(window, 'scrollTo').mockImplementation(() => {});
-      jest.spyOn(parentElem, 'scrollTo').mockImplementation(() => {});
-      jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: elemTop });
-    });
-
-    afterEach(() => {
-      window.scrollTo.mockRestore();
-      parentElem.scrollTo.mockRestore();
-      Element.prototype.getBoundingClientRect.mockRestore();
-      elem.remove();
-      parentElem.remove();
-    });
 
-    describe('scrollToElement with HTMLElement', () => {
-      it('scrolls to element', () => {
-        scrollToElement(elem);
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop,
-        });
+    describe('when project studio is disabled', () => {
+      beforeEach(() => {
+        setupEnvironment({ projectStudioEnabled: false, getBoundingClientRect: { top: elemTop } });
       });
 
-      it('scrolls to element with behavior: auto', () => {
-        scrollToElement(elem, { behavior: 'auto' });
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'auto',
-          top: elemTop,
-        });
-      });
+      describe('scrollToElement with HTMLElement', () => {
+        it('scrolls to element', () => {
+          scrollToElement(findElem());
 
-      it('scrolls to element with behavior: instant', () => {
-        scrollToElement(elem, { behavior: 'instant' });
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'instant',
-          top: elemTop,
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: elemTop,
+          });
         });
-      });
 
-      it('scrolls to element with offset', () => {
-        const offset = 50;
-        scrollToElement(elem, { offset });
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop + offset,
+        it('scrolls to element with behavior: auto', () => {
+          scrollToElement(findElem(), { behavior: 'auto' });
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'auto',
+            top: elemTop,
+          });
         });
-      });
 
-      it('scrolls to element within a parent', () => {
-        scrollToElement(elem, { parent: parentElem });
-        expect(parentElem.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop,
+        it('scrolls to element with behavior: instant', () => {
+          scrollToElement(findElem(), { behavior: 'instant' });
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'instant',
+            top: elemTop,
+          });
         });
-      });
 
-      describe('when prefers-reduced-motion: reduce', () => {
-        beforeEach(() => {
-          jest.spyOn(window, 'matchMedia').mockReturnValueOnce({ matches: true });
+        it('scrolls to element with offset', () => {
+          const offset = 50;
+          scrollToElement(findElem(), { offset });
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: elemTop + offset,
+          });
         });
 
-        it('overrides smooth behavior', () => {
-          scrollToElement(elem, { behavior: 'smooth' });
-          expect(window.scrollTo).toHaveBeenCalledWith({
+        it('scrolls to element within a parent', () => {
+          const parent = document.querySelector('#scroller');
+
+          scrollToElement(findElem(), { parent });
+          expect(parent.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
             top: elemTop,
-            behavior: 'auto',
           });
         });
 
-        it('does not override auto behavior', () => {
-          scrollToElement(elem, { behavior: 'auto' });
-          expect(window.scrollTo).toHaveBeenCalledWith({
-            top: elemTop,
-            behavior: 'auto',
+        describe('when prefers-reduced-motion: reduce', () => {
+          beforeEach(() => {
+            jest.spyOn(window, 'matchMedia').mockReturnValueOnce({ matches: true });
           });
-        });
 
-        it('does not override instant behavior', () => {
-          scrollToElement(elem, { behavior: 'instant' });
-          expect(window.scrollTo).toHaveBeenCalledWith({
-            top: elemTop,
-            behavior: 'instant',
+          it('overrides smooth behavior', () => {
+            scrollToElement(findElem(), { behavior: 'smooth' });
+            expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+              top: elemTop,
+              behavior: 'auto',
+            });
+          });
+
+          it('does not override auto behavior', () => {
+            scrollToElement(findElem(), { behavior: 'auto' });
+            expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+              top: elemTop,
+              behavior: 'auto',
+            });
+          });
+
+          it('does not override instant behavior', () => {
+            scrollToElement(findElem(), { behavior: 'instant' });
+            expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+              top: elemTop,
+              behavior: 'instant',
+            });
           });
         });
       });
-    });
 
-    describe('scrollToElement with Selector', () => {
-      it('scrolls to element', () => {
-        scrollToElement(`#${id}`);
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop,
+      describe('scrollToElement with Selector', () => {
+        it('scrolls to element', () => {
+          scrollToElement('#element');
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: elemTop,
+          });
         });
-      });
 
-      it('scrolls to element with offset', () => {
-        const offset = 50;
-        scrollToElement(`#${id}`, { offset });
-        expect(window.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop + offset,
+        it('scrolls to element with offset', () => {
+          const offset = 50;
+          scrollToElement('#element', { offset });
+          expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: elemTop + offset,
+          });
         });
-      });
 
-      it('scrolls to element within a parent', () => {
-        scrollToElement(`#${id}`, { parent: `#${parentId}` });
-        expect(parentElem.scrollTo).toHaveBeenCalledWith({
-          behavior: 'smooth',
-          top: elemTop,
+        it('scrolls to element within a parent', () => {
+          const parent = document.querySelector('#scroller');
+
+          scrollToElement('#element', { parent });
+          expect(parent.scrollTo).toHaveBeenCalledWith({
+            behavior: 'smooth',
+            top: elemTop,
+          });
         });
       });
     });
 
     describe('when project studio is enabled', () => {
       beforeEach(() => {
-        window.gon = {
-          features: {
-            projectStudioEnabled: true,
-          },
-        };
+        setupEnvironment({ projectStudioEnabled: true, getBoundingClientRect: { top: elemTop } });
       });
 
       it('scrolls the static panel', () => {
-        const staticPanelContainer = document.createElement('div');
-        staticPanelContainer.classList.add('js-static-panel');
-
-        const staticPanelScroller = document.createElement('div');
-        staticPanelScroller.classList.add('js-static-panel-inner');
-
-        staticPanelContainer.appendChild(staticPanelScroller);
-
-        staticPanelScroller.appendChild(elem);
-
-        document.body.appendChild(staticPanelContainer);
-
-        jest.spyOn(staticPanelScroller, 'scrollTo').mockImplementation(() => {});
-        jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: elemTop });
-
-        scrollToElement(elem);
-        expect(staticPanelScroller.scrollTo).toHaveBeenCalledWith({
+        scrollToElement(findElem());
+        expect(findStaticPanelInner().scrollTo).toHaveBeenCalledWith({
           behavior: 'smooth',
           top: elemTop,
         });
       });
 
       it('scrolls the dynamic panel', () => {
-        const dynamicPanelContainer = document.createElement('div');
-        dynamicPanelContainer.classList.add('js-dynamic-panel');
-
-        const dynamicPanelScroller = document.createElement('div');
-        dynamicPanelScroller.classList.add('js-dynamic-panel-inner');
+        scrollToElement(findElemInDynamicPanel());
 
-        dynamicPanelContainer.appendChild(dynamicPanelScroller);
-
-        dynamicPanelScroller.appendChild(elem);
-
-        document.body.appendChild(dynamicPanelContainer);
-
-        jest.spyOn(dynamicPanelScroller, 'scrollTo').mockImplementation(() => {});
-        jest.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ top: elemTop });
-
-        scrollToElement(elem);
-        expect(dynamicPanelScroller.scrollTo).toHaveBeenCalledWith({
+        expect(findDynamicPanelInner().scrollTo).toHaveBeenCalledWith({
           behavior: 'smooth',
           top: elemTop,
         });
@@ -375,55 +335,13 @@ describe('scroll utils', () => {
   });
 
   describe('smooth_scroll', () => {
-    let scrollToSpy;
-
-    beforeEach(() => {
-      scrollToSpy = jest.spyOn(window, 'scrollTo');
-    });
-
-    afterEach(() => {
-      scrollToSpy.mockRestore();
-    });
-
-    describe('smoothScrollTo', () => {
-      describe('when user prefers reduced motion', () => {
-        beforeEach(() => {
-          jest.spyOn(window, 'matchMedia').mockReturnValueOnce({ matches: true });
-        });
-
-        it('calls scrollTo with the provided options', () => {
-          smoothScrollTo({ top: 100 });
-
-          expect(scrollToSpy).toHaveBeenCalledWith({
-            top: 100,
-            behavior: 'auto',
-          });
-        });
-      });
-
-      describe('when user does not prefer reduced motion', () => {
-        beforeEach(() => {
-          jest.spyOn(window, 'matchMedia').mockReturnValue({ matches: false });
-        });
-
-        it('calls scrollTo with the provided options', () => {
-          smoothScrollTo({ top: 100 });
-
-          expect(scrollToSpy).toHaveBeenCalledWith({
-            top: 100,
-            behavior: 'smooth',
-          });
-        });
-      });
-    });
-
     describe('smoothScrollTop', () => {
       it('calls scrollTo with top 0', () => {
         smoothScrollTop();
 
-        expect(scrollToSpy).toHaveBeenCalledWith({
+        expect(document.scrollingElement.scrollTo).toHaveBeenCalledWith({
           top: 0,
-          behavior: expect.stringMatching('auto|smooth'),
+          behavior: 'smooth',
         });
       });
     });
-- 
GitLab