Я строю компонент 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
