移动设备上的滚动问题

Question

我在移动设备上遇到滚动 CSS 的问题。我附上了一张图片。由于 100vh 高度，我无法滚动到主体。底部被底部导航遮挡。然后我删除了 100vh 但它仍然无法工作。

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;

Answer 1

处理不完整的代码很困难，但我在 html/css 中做了一个示例，说明如何解决这个问题：

: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

确保

.content

div 可滚动

移动设备上的滚动问题

问题描述投票：0回答：1

1个回答

最新问题

移动设备上的滚动问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1