Появляется прокрутка, но модальная не прокручивается через трекпад или мышь ⇐ Javascript

[Anonymous]

Я строю компонент React, который действует как модальный с прокручиваемым контентом. Проблема: < /p>

Модальное содержание можно прокрутить путем перетаскивания прокрутки < /li>
Но содержание не реагирует на жесты для прокрутки мыши или трекпада (например, два потока на мак-треке). Заблокируя прокрутку на корпусе при открытии модала (используя положение: исправлено), но он все равно не будет прокручивать с помощью колеса мыши или трекпада. Это довольно разочаровывает!import { useState, useEffect } from "react";

interface CommiteeCardProps {
title: string;
description: string;
expandedDescription: string;
backgroundGuideLink?: string;
director?: string;
backgroundImage?: string;
directorImage?: string;
jointOrNot?: boolean;
}

const CommiteeCard = ({
title,
description,
expandedDescription,
director,
backgroundImage,
jointOrNot = false,
}: CommiteeCardProps) => {
const [isModalOpen, setIsModalOpen] = useState(false);

// Lock scroll when modal is open

useEffect(() => {
if (isModalOpen) {
document.body.classList.add("modal-open");
} else {
document.body.classList.remove("modal-open");
}
return () => {
document.body.classList.remove("modal-open");
};
}, [isModalOpen]);

const handleOpenModal = () => {
setIsModalOpen(true);
};

const handleCloseModal = () => {
setIsModalOpen(false);
};

return (

{/* Card */}
className="relative bg-white flex flex-col justify-end rounded-lg shadow-lg p-6 w-[90%] md:w-[100%] h-[600px] mx-auto cursor-pointer hover:shadow-xl transition-shadow"
onClick={handleOpenModal}
style={{
backgroundImage: `url('${backgroundImage}')`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
>



{title}


{description}


Learn More




{/* Modal */}
{isModalOpen && (
className="fixed inset-0 z-50 flex justify-center items-center bg-black/70"
onClick={handleCloseModal}
>
e.stopPropagation()}
>
{/* Left (image) section */}
{backgroundImage && (

)}

{/* Right (scrollable) content section */}
style={{
WebkitOverflowScrolling: "touch",
touchAction: "auto",
overscrollBehavior: "contain",
}}
className="modal-scrollbar flex flex-col justify-start pr-4 overflow-y-scroll h-[90vh]"
>

{title}


{jointOrNot ? "Joint Crisis" : "Single Crisis"}


{expandedDescription}

{director && (


Director


{director}

)}



)}

);
};

export default CommiteeCard;
< /code>
Что я попробовал: < /strong> < /p>

Настройка переполнения y: Auto на прокручиваемом контейнере с модальным содержанием. Исправлена и настройка топа, чтобы предотвратить фоновый прокруток, пока открыт модальный. https://ssicsim.ca/committees

Подробнее здесь: https://stackoverflow.com/questions/797 ... d-or-mouse