diff --git a/src/hooks/useBodyScrollLock/useBodyScrollLock.ts b/src/hooks/useBodyScrollLock/useBodyScrollLock.ts index 5af74ca2f..44c171596 100644 --- a/src/hooks/useBodyScrollLock/useBodyScrollLock.ts +++ b/src/hooks/useBodyScrollLock/useBodyScrollLock.ts @@ -1,16 +1,23 @@ import React from 'react'; -import get from 'lodash/get'; +const PROPERTY_PADDING_RIGHT = 'padding-right'; +const PROPERTY_PADDING_BOTTOM = 'padding-bottom'; +const PROPERTY_OVERFLOW = 'overflow'; + +const STORED_BODY_STYLE_KEYS = [ + PROPERTY_OVERFLOW, + PROPERTY_PADDING_RIGHT, + PROPERTY_PADDING_BOTTOM, +] as const; -const STORED_BODY_STYLE_KEYS = ['overflow', 'paddingRight', 'paddingBottom'] as const; type StoredBodyStyleKeys = (typeof STORED_BODY_STYLE_KEYS)[number]; -type StoredBodyStyle = Partial>; +type StoredBodyStyle = Partial>; function getStoredStyles(): StoredBodyStyle { const styles: StoredBodyStyle = {}; for (const property of STORED_BODY_STYLE_KEYS) { - styles[property] = get(document.body.style, property); + styles[property] = document.body.style.getPropertyValue(property); } return styles; @@ -53,13 +60,19 @@ function setBodyStyles() { storedBodyStyle = getStoredStyles(); - document.body.style.overflow = 'hidden'; + document.body.style.setProperty(PROPERTY_OVERFLOW, 'hidden'); if (yScrollbarWidth) { - document.body.style.paddingRight = `${bodyPadding.right + yScrollbarWidth}px`; + document.body.style.setProperty( + PROPERTY_PADDING_RIGHT, + `${bodyPadding.right + yScrollbarWidth}px`, + ); } if (xScrollbarWidth) { - document.body.style.paddingBottom = `${bodyPadding.bottom + xScrollbarWidth}px`; + document.body.style.setProperty( + PROPERTY_PADDING_BOTTOM, + `${bodyPadding.bottom + xScrollbarWidth}px`, + ); } } @@ -67,7 +80,7 @@ function restoreBodyStyles() { for (const property of STORED_BODY_STYLE_KEYS) { const storedProperty = storedBodyStyle[property]; if (storedProperty) { - document.body.style[property] = storedProperty; + document.body.style.setProperty(property, storedProperty); } else { document.body.style.removeProperty(property); }