reactjs - 如何防止到达路由器禁用子组件中的滚动

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