crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-19 05:31:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bug fixed: iOS Safari Modal Scrollbar it does not work

Browse Source
This commit is contained in:
Alexis Barba 2021-03-20 20:58:00 -07:00
parent b5ba5e76be
commit 1587c617ae
2 changed files with 6 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/ui/Sidebar/Sidebar.tsx
View File

@ -1,11 +1,6 @@
import s from './Sidebar.module.css' import s from './Sidebar.module.css'
import Portal from '@reach/portal' import Portal from '@reach/portal'
import { FC, useEffect, useRef } from 'react' import { FC, useEffect } from 'react'
import {
disableBodyScroll,
enableBodyScroll,
clearAllBodyScrollLocks,
} from 'body-scroll-lock'
interface Props { interface Props {
children: any children: any
@ -14,25 +9,19 @@ interface Props {
} }
const Sidebar: FC<Props> = ({ children, open = false, onClose }) => { const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
const ref = useRef() as React.MutableRefObject<HTMLDivElement>
useEffect(() => { useEffect(() => {
if (ref.current) {
if (open) { if (open) {
disableBodyScroll(ref.current) document.body.style.overflow = 'hidden'
} else { } else {
enableBodyScroll(ref.current) document.body.style.overflow = 'auto'
}
}
return () => {
clearAllBodyScrollLocks()
} }
}, [open]) }, [open])
return ( return (
<Portal> <Portal>
{open ? ( {open ? (
<div className={s.root} ref={ref}> <div className={s.root}>
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<div <div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity" className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"

2
package.json
View File

@ -20,7 +20,6 @@
"@reach/portal": "^0.11.2", "@reach/portal": "^0.11.2",
"@vercel/fetch": "^6.1.0", "@vercel/fetch": "^6.1.0",
"autoprefixer": "^10.2.4", "autoprefixer": "^10.2.4",
"body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0", "bowser": "^2.11.0",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"cookie": "^0.4.1", "cookie": "^0.4.1",
@ -53,7 +52,6 @@
"@graphql-codegen/typescript-operations": "^1.17.13", "@graphql-codegen/typescript-operations": "^1.17.13",
"@manifoldco/swagger-to-ts": "^2.1.0", "@manifoldco/swagger-to-ts": "^2.1.0",
"@next/bundle-analyzer": "^10.0.1", "@next/bundle-analyzer": "^10.0.1",
"@types/body-scroll-lock": "^2.6.1",
"@types/classnames": "^2.2.10", "@types/classnames": "^2.2.10",
"@types/cookie": "^0.4.0", "@types/cookie": "^0.4.0",
"@types/js-cookie": "^2.2.6", "@types/js-cookie": "^2.2.6",