如何防止 Reach Router 在子组件中禁用滚动

Question

Router 子组件中的父元素（"overflow-y" 设置为 "scroll"）禁用滚动条和滚动，为什么它的行为是这样的，我如何防止它/使它工作？

现场演示：https://codesandbox.io/s/priceless-johnson-1fkju

import React from "react";
import { Router } from "@reach/router";

import Chats from "./Chats";
import { TopBar, AndroidControls } from "../components/shared";

const Routing = () => {
  return (
    <div className="app-wrapper">
      <TopBar />
     {* <section className="content"> *} // So i tested this, the section element need to be outside of the router comp for it to work , why?
      <Router>
        <Chats path="/" />
      </Router>
    {/* </section> *}
      <AndroidControls />
    </div>
  );
};

export default Routing;

Answer 1

问题出在你的CSS

稍微修改一下你css

由此

.content {
  width: 100%;
  height: calc(100% - 22rem);
  padding-bottom: 4.9rem;
  background-color: #fff;
  overflow-y: scroll;
}

至此

.content {
  width: 100%;
  height: 80vh; /*Changed the height value*/
  padding-bottom: 4.9rem;
  background-color: #fff;
  overflow-y: auto; /*Changed to auto*/
}

CodeSandbox modified

如何防止 Reach Router 在子组件中禁用滚动

How to prevent Reach Router from disabling Scrolling in children component

reactjs

react-router

reach-router