Block scroll when opening cart
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user