Block scroll when opening cart

This commit is contained in:
2022-10-09 15:37:46 +02:00
parent 4b984fa078
commit 12327ecb1f
2 changed files with 18 additions and 0 deletions

View File

@@ -3,9 +3,11 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fade, fly } from 'svelte/transition' import { fade, fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing' import { quartOut } from 'svelte/easing'
import { smoothScroll } from '$utils/stores'
import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop' import { cartOpen, cartData, cartAmount, cartIsUpdating } from '$utils/stores/shop'
import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop' import { initSwell, getCart, updateCartItem, removeCartItem } from '$utils/functions/shop'
// Components // Components
@@ -15,6 +17,18 @@
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte' import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
// Block scroll if cart is open
$: if (browser && $smoothScroll) {
if ($cartOpen) {
$smoothScroll.stop()
} else {
$smoothScroll.start()
}
document.documentElement.classList.toggle('block-scroll', $cartOpen)
}
// Closing the cart // Closing the cart
const handleCloseCart = () => { const handleCloseCart = () => {
$cartOpen = false $cartOpen = false

View File

@@ -24,6 +24,10 @@ html {
color: #fff; color: #fff;
min-width: 320px; min-width: 320px;
word-break: normal; word-break: normal;
&.block-scroll {
overflow: hidden;
}
} }
body { body {
@include font-smooth; @include font-smooth;