Prevent horizontal shift when opening the Mini-Cart drawer if scrollb…

…ars are visible (#9648) * Fix wrong TS name * Prevent page horizontal shift when opening the Mini-Cart drawer when scrollbars are visible
woocommerce · May 30, 2023 · e7ec80c · e7ec80c
1 parent 556b5f7
commit e7ec80c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
@@ -51,6 +51,10 @@ interface Props {
 	hasHiddenPrice: boolean;
 }
 
+function getScrollbarWidth() {
+	return window.innerWidth - document.documentElement.clientWidth;
+}
+
 const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 	const {
 		isInitiallyOpen = false,
@@ -91,10 +95,14 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 	useEffect( () => {
 		const body = document.querySelector( 'body' );
 		if ( body ) {
+			const scrollBarWidth = getScrollbarWidth();
 			if ( isOpen ) {
-				Object.assign( body.style, { overflow: 'hidden' } );
+				Object.assign( body.style, {
+					overflow: 'hidden',
+					paddingRight: scrollBarWidth + 'px',
+				} );
 			} else {
-				Object.assign( body.style, { overflow: '' } );
+				Object.assign( body.style, { overflow: '', paddingRight: 0 } );
 			}
 		}
 	}, [ isOpen ] );

diff --git a/...blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/...blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -5,11 +5,13 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { CartLineItemsTable } from '@woocommerce/base-components/cart-checkout';
 import classNames from 'classnames';
 
-type MiniCartContentsBlockProps = {
+type MiniCartProductsTableBlockProps = {
 	className: string;
 };
 
-const Block = ( { className }: MiniCartContentsBlockProps ): JSX.Element => {
+const Block = ( {
+	className,
+}: MiniCartProductsTableBlockProps ): JSX.Element => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 	return (
 		<div