Batch fixed position style updates (#337)

emilkowalski · May 7, 2024 · d3c1cee · d3c1cee
1 parent 7e340d3
commit d3c1cee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 16 deletions.
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -20,8 +20,8 @@ export function isInView(el: HTMLElement): boolean {
   );
 }
 
-export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
-  if (!el || !(el instanceof HTMLElement) || !styles) return;
+export function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache = false) {
+  if (!el || !(el instanceof HTMLElement)) return;
   let originalStyles: Style = {};
 
   Object.entries(styles).forEach(([key, value]: [string, string]) => {

diff --git a/src/use-position-fixed.ts b/src/use-position-fixed.ts
@@ -15,7 +15,7 @@ export function usePositionFixed({
   hasBeenOpened: boolean;
   preventScrollRestoration: boolean;
 }) {
-  const [activeUrl, setActiveUrl] = React.useState(typeof window !== 'undefined' ? window.location.href : '');
+  const [activeUrl, setActiveUrl] = React.useState(() => (typeof window !== 'undefined' ? window.location.href : ''));
   const scrollPos = React.useRef(0);
 
   const setPositionFixed = React.useCallback(() => {
@@ -26,20 +26,23 @@ export function usePositionFixed({
         top: document.body.style.top,
         left: document.body.style.left,
         height: document.body.style.height,
+        right: 'unset',
       };
 
       // Update the dom inside an animation frame
       const { scrollX, innerHeight } = window;
 
       document.body.style.setProperty('position', 'fixed', 'important');
-      document.body.style.top = `${-scrollPos.current}px`;
-      document.body.style.left = `${-scrollX}px`;
-      document.body.style.right = '0px';
-      document.body.style.height = 'auto';
+      Object.assign(document.body.style, {
+        top: `${-scrollPos.current}px`,
+        left: `${-scrollX}px`,
+        right: '0px',
+        height: 'auto',
+      });
 
-      setTimeout(
+      window.setTimeout(
         () =>
-          requestAnimationFrame(() => {
+          window.requestAnimationFrame(() => {
             // Attempt to check if the bottom bar appeared due to the position change
             const bottomBarHeight = innerHeight - window.innerHeight;
             if (bottomBarHeight && scrollPos.current >= innerHeight) {
@@ -59,13 +62,9 @@ export function usePositionFixed({
       const x = -parseInt(document.body.style.left, 10);
 
       // Restore styles
-      document.body.style.position = previousBodyPosition.position;
-      document.body.style.top = previousBodyPosition.top;
-      document.body.style.left = previousBodyPosition.left;
-      document.body.style.height = previousBodyPosition.height;
-      document.body.style.right = 'unset';
+      Object.assign(document.body.style, previousBodyPosition);
 
-      requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
         if (preventScrollRestoration && activeUrl !== window.location.href) {
           setActiveUrl(window.location.href);
           return;
@@ -101,7 +100,7 @@ export function usePositionFixed({
       !isStandalone && setPositionFixed();
 
       if (!modal) {
-        setTimeout(() => {
+        window.setTimeout(() => {
           restorePositionSetting();
         }, 500);
       }