Tidak boleh menatal secara menegak dalam mod React

Question

Saya cuba memaparkan modal dalam projek React saya. Apabila modal ditunjukkan, saya menetapkan limpahan badan kepada tersembunyi melalui useEffect (jika tidak, ia akan menunjukkan bar skrol untuk kandungan utama di bawah modal). Ia berfungsi dengan sempurna untuk menghalang kandungan latar belakang daripada menatal, tetapi masalahnya ialah saya tidak boleh menatal dalam modal sama ada. Kod halaman utama adalah seperti berikut:

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"));

Ini ialah kod untuk modal:

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;

Ini ialah contoh langsung codesandbox: https://codesandbox.io/s/lockingmodal-8mvn36?file=/index.js:1160-4493

Answer 1

Tambahkan dua baris ini pada "modal-background" kelas anda

height:50vh;
overflow:auto;