css Question posted in
Some basic documentation can be found here.

Css – Scroll Issue on mobile

enter image description here

I am facing an issue with scrolling CSS on my mobile devices. I have attached an image. due to the 100vh height, I can’t scroll to my main body. the bottom part gets obscured by the bottom nav. then I removed the 100vh but it still isn’t working.

import React, { ReactNode, useEffect } from "react";
import Header from "../LeftSide/Header";
import LeftSide from "../LeftSide/LeftSide";
import "./Layout.css";

interface Props {
  children?: ReactNode;
}
const Layout = ({ children, ...props }: Props) => {
const [collapsed, setCollapsed] = React.useState(false);
const handleValueChange = (value: any) => {
  setCollapsed(!collapsed);
};

useEffect(() => {
  window.scrollTo(0, 0);

  if (window.innerWidth <= 1000) {
    setCollapsed(true);
  }
}, []);

return (
  <>
    <div className='d-flex' style={{ height: "100vh", overflow: "hidden" }}>
    <div className='mobileSidebar'>
      <LeftSide collapsed={collapsed} setCollapsed={setCollapsed} />
    </div>
    <div style={{ width: "100%" }}>
      <Header onValueChange={handleValueChange} />
        <div {...props}>{children}</div>
      </div>
    </div>
  </>
 );
};

export default Layout;
Tags:

2

Answers


  1. 0

    It’s hard to work with incomplete code but i made an example in html/css with how you can solve this problem:

    :root {
  --nav-top-height: 60px;
  --nav-bottom-height: 60px;
}

.navbar-top {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--nav-top-height);
  background: blue;
}

.content {
  position: fixed;
  top: var(--nav-top-height);
  bottom: var(--nav-bottom-height);
  font-size: 22px;
  overflow-y: auto;
}

.navbar-bottom {
  position: fixed;
  height: var(--nav-bottom-height);
  bottom: 0;
  width: 100%;
  background: green;
}
    <html>
<head>
</head>
<body>
  <div class="navbar-top"></div>
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="navbar-bottom"></div>
</body>
</html>

    overflow-y: auto makes sure the .content div is scrollable

    Login or Signup to reply.
  2. 0

    Instead of using height: 100vh, use min-height with a calc() function to subtract the height of the mobile browser’s navigation bar. This ensures that your layout is responsive on mobile devices.

    import React, { ReactNode, useEffect } from "react";
import Header from "../LeftSide/Header";
import LeftSide from "../LeftSide/LeftSide";
import "./Layout.css";

interface Props {
children?: ReactNode;
}
const Layout = ({ children, ...props }: Props) => {
const [collapsed, setCollapsed] = React.useState(false);

const handleValueChange = (value: any) => {
setCollapsed(!collapsed);
};

useEffect(() => {
window.scrollTo(0, 0);

if (window.innerWidth <= 1000) {
  setCollapsed(true);
}
}, []);

return (
<>
  <div className="d-flex" style={{ minHeight: "100vh", overflow: "hidden" 
}}>
    {/* Sidebar */}
    <div className="mobileSidebar">
      <LeftSide collapsed={collapsed} setCollapsed={setCollapsed} />
    </div>

    {/* Main Content Area */}
    <div style={{ width: "100%" }}>
      <Header onValueChange={handleValueChange} />
      <div className="contentContainer" {...props} style={{ minHeight: 
  "calc(100vh - 60px)" }}>
        {children}
      </div>
    </div>
  </div>
  </>
 );
 };

 export default Layout;

    Adjust Layout css too

    .mobileSidebar {
width: 250px;
/*adjust width acc to you */
}
.contentContainer {
height: auto; 
overflow-y: auto;
}

    This should fix the scrolling issue and ensure the layout works properly on all devices

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search