Fix(web-react): Simplify useScrollControl to not scroll or set top of…

…fset #DS-1124
lmc-eu · Jan 11, 2024 · 0df3c47 · 0df3c47
1 parent e9277ea
commit 0df3c47
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 23 deletions.
diff --git a/packages/web-react/src/hooks/__tests__/useScrollControl.test.ts b/packages/web-react/src/hooks/__tests__/useScrollControl.test.ts
@@ -3,23 +3,12 @@ import { MutableRefObject } from 'react';
 import { useScrollControl } from '../useScrollControl';
 
 describe('useScrollControl', () => {
-  let originalScrollTo: typeof window.scrollTo;
-
   const createMockRef = (isOpen: boolean) => ({
     current: {
       open: isOpen,
     },
   });
 
-  beforeEach(() => {
-    originalScrollTo = window.scrollTo;
-    window.scrollTo = jest.fn();
-  });
-
-  afterEach(() => {
-    window.scrollTo = originalScrollTo;
-  });
-
   it('should disable scroll when isOpen is true', () => {
     const mockRef = createMockRef(true) as MutableRefObject<HTMLDialogElement | null>;
 
@@ -28,15 +17,12 @@ describe('useScrollControl', () => {
     });
 
     expect(document.body.classList.contains('is-scrolling-disabled')).toBe(true);
-    expect(document.body.style.top).toMatch(/-\d+px/);
     expect(document.body.style.paddingRight).toMatch(/\d+px/);
   });
 
   it('should enable scroll when isOpen is false', () => {
     const mockRef = createMockRef(false) as MutableRefObject<HTMLDialogElement | null>;
 
-    const scrollToSpy = jest.spyOn(window, 'scrollTo');
-
     act(() => {
       renderHook(() => useScrollControl(mockRef, true));
     });
@@ -45,8 +31,6 @@ describe('useScrollControl', () => {
       renderHook(() => useScrollControl(mockRef, false));
     });
 
-    expect(scrollToSpy).toHaveBeenCalledWith(0, 0);
     expect(document.body.classList.contains('is-scrolling-disabled')).toBe(false);
-    expect(document.body.style.top).toBe('');
   });
 });
diff --git a/packages/web-react/src/hooks/useScrollControl.ts b/packages/web-react/src/hooks/useScrollControl.ts
@@ -5,28 +5,23 @@ const CLASSNAME_SCROLLING_DISABLED = 'is-scrolling-disabled';
 const disableScroll = () => {
   const { body } = document;
   const scrollBarWidth = window.innerWidth - body.clientWidth;
-  const offsetY = window.scrollY;
 
   body.style.paddingRight = `${scrollBarWidth}px`;
-  body.style.top = `-${offsetY}px`;
   body.classList.add(CLASSNAME_SCROLLING_DISABLED);
 };
 
-const enableScroll = (offsetY: number) => {
+const enableScroll = () => {
   const { body } = document;
   body.style.paddingRight = '';
-  body.style.top = '';
   body.classList.remove(CLASSNAME_SCROLLING_DISABLED);
-  window.scrollTo(0, -offsetY);
 };
 
 export const useScrollControl = (ref: MutableRefObject<HTMLDialogElement | null>, isOpen: boolean) => {
   useEffect(() => {
     if (isOpen) {
       disableScroll();
     } else if (ref.current && !ref.current.open) {
-      const offsetY = parseFloat(document.body.style.top || '0');
-      enableScroll(offsetY);
+      enableScroll();
     }
   }, [isOpen, ref]);
 };