無法在 React 模式中垂直捲動

Question

我正在嘗試在我的 React 專案中顯示模式。當模態顯示時，我透過 useEffect 將 body 的溢出設為隱藏（否則，它會顯示模態下方主頁內容的捲軸）。它可以完美地防止背景內容滾動，但問題是我也無法在模式中滾動。 主頁面程式碼如下：

import React, { useState } from "react";
import { render } from "react-dom";
import MyModal from "./MyModal";
import "./index.css";

function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <div className="wrapper">
      <button
        onClick={() => {
          setShowModal((current) => !current);
        }}
      >
        {`${showModal ? "Hide Modal" : "Show Modal"}`}
      </button>
      {showModal && <MyModal {...{ showModal, setShowModal }} />}
      <p>
        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.
      </p>
      
    </div>
  );
}

render(<App />, document.getElementById("root"));

這是模態的程式碼：

import { useEffect } from "react";
import "./modal.css";

const MyModal = ({ showModal, setShowModal }) => {
  useEffect(() => {
    document.body.style.overflowY = "hidden";
    return () => {
      document.body.style.overflowY = "auto";
    };
  }, []);
  return (
    <div className="modal-background">
      <button
        onClick={() => {
          setShowModal(false);
        }}
      >
        Close
      </button>
      <p className="heading">This is Modal</p>
      <p>
        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
      </p>
    </div>
  );
};

export default MyModal;

這是codesandbox的即時範例：https://codesandbox.io/s/lockingmodal-8mvn36?file=/index.js:1160-4493

Answer 1

將這兩行加入您的類別「modal-background」

height:50vh;
overflow:auto;