Scrollbar width

gotpop · Oct 31, 2022 · ed4e3d6 · ed4e3d6
1 parent 1bc33f9
commit ed4e3d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/layouts/Site.module.css b/src/layouts/Site.module.css
@@ -10,7 +10,7 @@
   overflow: hidden;
   transition: translate var(--timing) ease;
   translate: var(--menu-state);
-  width: calc(100vw + var(--menu-side-width));
+  width: calc(100vw + var(--menu-side-width) - var(--scrollbar-width));
 
   @media (--ipad) {
     grid-template-areas:

diff --git a/src/layouts/layout.tsx b/src/layouts/layout.tsx
@@ -1,27 +1,30 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import Head from 'next/head'
 import Header from '@components/Header'
 import Footer from '@components/Footer'
-// import MenuContext from '@context/MenuContext'
 import Trigger from '@components/Trigger'
 import styles from './Site.module.css'
 
+const getScrollBarWidth = () => {
+  let root = document.documentElement
+  const width = window.innerWidth - root.clientWidth
+
+  root.style.setProperty('--scrollbar-width', `${width}px`)
+}
+
 export default function Layout(props) {
   const { children } = props
-  // const { menu } = useContext(MenuContext)
 
   useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--scrollbar-width',
-      window.innerWidth - document.documentElement.clientWidth + 'px'
-    )
+    getScrollBarWidth()
   }, [])
 
   return (
     <>
       <Head>
         <title>CSS 2023</title>
         <link rel="icon" href="/favicon.ico" />
+        <meta name="viewport" content="width=device-width, user-scalable=no" />
       </Head>
       <div className={styles.site}>
         <Header />