0

this is the code of index.js of a next app have used snap-scroll due to which i think the browser header and footer parts (i.e. searchbar) do not hide or minimise automatically, how to fix that

export default function Home() {
  return (
    <div className="h-screen w-full snap-y snap-mandatory scroll-smooth overflow-y- 
   auto no-scrollbar dark:bg-[#020111] bg-white overflow-x-hidden text-black">
      <div
        id="section1"
        className=" snap-start snap-always h-screen bg-slate-100"
      >
        section1
      </div>
      <div
        id="section2"
        className=" snap-start snap-always h-screen bg-slate-200"
      >
        section2
      </div>
      <div
        id="section3"
        className=" snap-start snap-always h-screen bg-slate-300"
      >
        section3
      </div>
      <div
        id="section4"
        className=" snap-start snap-always h-screen bg-slate-400"
      >
        section4
      </div>
    </div>
  );
 }

next is app.js

import "@/styles/globals.css";
import Head from "next/head";

export default function App({ Component, pageProps }) {
  return (
    <>
     <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0"
        ></meta>
      </Head>
      <Component {...pageProps} />
    </>
  );
}
Pratham Rohatgi
  • 33
  • 6

0 Answers0