React/Next.js，打开对话框后页面滚动冻结

Question

所以基本上当用户点击图像时，我将图像的细节显示为一个模态/对话框。但在对话框关闭后，屏幕滚动条冻结。屏幕上的东西可以工作，但我不能向下滚动并访问其他元素。知道怎么调试吗?

我觉得这是因为模态禁用了我的滚动条。

下面是我的对话框代码

import React from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import {XIcon} from '@heroicons/react/solid'
import {useRecoilState} from 'recoil'
import {openState} from '../../../atoms/modalAtom'

const product = {
name: "Women's Basic Tee",
price: '$32',
rating: 3.9,
reviewCount: 512,
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-page-01-featured-product-shot.jpg',
imageAlt: "Back of women's Basic Tee in black.",
colors: [
{ name: 'Black', bgColor: 'bg-gray-900', selectedColor: 'ring-gray-900' },
{ name: 'Heather Grey', bgColor: 'bg-gray-400', selectedColor: 'ring-gray-400' },
],
sizes: [
{ name: 'XXS', inStock: true },
{ name: 'XS', inStock: true },
{ name: 'S', inStock: true },
{ name: 'M', inStock: true },
{ name: 'L', inStock: true },
{ name: 'XL', inStock: true },
{ name: 'XXL', inStock: false },
],
}
export function DesignQuickView ({design}) {
const [open, setOpen] = useRecoilState(openState)
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => setOpen(false)}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="hidden fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity md:block" />
</Transition.Child>
<div className="fixed z-10 inset-0 overflow-y-auto">
<div className="flex items-stretch md:items-center justify-center min-h-full text-center md:px-2 lg:px-4">
{/* This element is to trick the browser into centering the modal contents. */}
<span className="hidden md:inline-block md:align-middle md:h-screen" aria-hidden="true">
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
enterTo="opacity-100 translate-y-0 md:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 md:scale-100"
leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
>
<Dialog.Panel className="flex text-base text-left transform transition w-full md:max-w-2xl md:px-4 md:my-8 lg:max-w-4xl">
<div className="w-full relative flex items-center bg-white px-4 pt-14 pb-8 overflow-hidden shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
<button
type="button"
className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 sm:top-8 sm:right-6 md:top-6 md:right-6 lg:top-8 lg:right-8"
onClick={() => setOpen(false)}
>
<span className="sr-only">Close</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
<div className="w-full grid grid-cols-1 gap-y-8 gap-x-6 items-start sm:grid-cols-12 lg:items-center lg:gap-x-8">
<div className="aspect-w-2 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden sm:col-span-4 lg:col-span-5">
<img src={design.url} alt={design.name} className="object-center object-cover" />
</div>
<div className="sm:col-span-8 lg:col-span-7">
<h2 className="text-xl font-medium text-gray-900 sm:pr-12">Hoodie</h2>
<section aria-labelledby="information-heading" className="mt-1">
<h3 id="information-heading" className="sr-only">
Product information
</h3>
<p className="font-medium text-gray-900">{product.price}</p>

</section>
<section aria-labelledby="options-heading" className="mt-8">
<h3 id="options-heading" className="sr-only">
Product options
</h3>
<form>
{/* Color picker */}
<div>
<h4 className="text-sm font-medium text-gray-900">Color</h4>
{/* <RadioGroup value={selectedColor} onChange={setSelectedColor} className="mt-2">
<RadioGroup.Label className="sr-only">Choose a color</RadioGroup.Label>
<div className="flex items-center space-x-3">
{product.colors.map((color) => (
<RadioGroup.Option
key={color.name}
value={color}
className={({ active, checked }) =>
classNames(
color.selectedColor,
active && checked ? 'ring ring-offset-1' : '',
!active && checked ? 'ring-2' : '',
'-m-0.5 relative p-0.5 rounded-full flex items-center justify-center cursor-pointer focus:outline-none'
)
}
>
<RadioGroup.Label as="span" className="sr-only">
{color.name}
</RadioGroup.Label>
<span
aria-hidden="true"
className={classNames(
color.bgColor,
'h-8 w-8 border border-black border-opacity-10 rounded-full'
)}
/>
</RadioGroup.Option>
))}
</div>
</RadioGroup> */}
</div>
{/* Size picker */}
<div className="mt-8">
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-gray-900">Size</h4>
<a href="#" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
Size guide
</a>
</div>
{/* <RadioGroup value={selectedSize} onChange={setSelectedSize} className="mt-2">
<RadioGroup.Label className="sr-only">Choose a size</RadioGroup.Label>
<div className="grid grid-cols-7 gap-2">
{product.sizes.map((size) => (
<RadioGroup.Option
key={size.name}
value={size}
className={({ active, checked }) =>
classNames(
size.inStock
? 'cursor-pointer focus:outline-none'
: 'opacity-25 cursor-not-allowed',
active ? 'ring-2 ring-offset-2 ring-indigo-500' : '',
checked
? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700'
: 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
'border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1'
)
}
disabled={!size.inStock}
>
<RadioGroup.Label as="span">{size.name}</RadioGroup.Label>
</RadioGroup.Option>
))}
</div>
</RadioGroup> */}
</div>
</form>
</section>
</div>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}
export default DesignQuickView

下面是我如何调用模态/对话框

const Design = ({design}) => {
const [open, setOpen] = useRecoilState(openState)

return( 
//Wrapping the image in a card
<div>
<div >
<img className= "inline-block h-14 w-14 rounded-md " 
src={design.url} 
alt="Custom design"
onClick={()=>setOpen(true)}

/>
</div>
<DesignQuickView design= {design}/>
</div>
)
}
export default Design

我想是滚动条。关于我如何调试的任何线索?

Answer 1

我有同样的问题，关闭模态后，滚动停止在主页上工作。

问题:我正在渲染一个列表，其中每个项目都有一个打开模态的按钮，并且我已经将模态放入该列表中。

const [isOpen, setIsOpen] = useState(false);
const data = [
// My data was an array of objects,
// where each object contained position data
]
const closeModal = () => {
setIsOpen(false);
};
const openModal = () => {
setIsOpen(true);
};
<div>
{data.map((position) => (
<button onClick={openModal}>Open Modal</button>
<MyModal positionData={position} /> // <--------- Problem!
))}
</div>

解决方案:将模态移出列表，并创建一个状态变量，在openModal和closemmodal函数中更新:

const [selectedPosition, setSelectedPosition] = useState(null);
const [isOpen, setIsOpen] = useState(false);
const data = [
// My data was an array of objects,
// where each object contained position data
]
const closeModal = () => {
setSelectedPosition(null);
setIsOpen(false);
};
const openModal = (position) => {
setSelectedPosition(position);
setIsOpen(true);
};
<div>
{data.map((position) => (
<button onClick={() => openModal(position)}>Open Modal</button>
))}
<MyModal positionData={selectedPosition} /> // <-------- Solved!
</div>