HeadlessUI打开下拉/Dialog时自动修改滚动样式的解决办法

为什么会自动添加 overflow: hidden 和 padding-right: 17px？ #

HeadlessUI 做这个处理是为了避免下拉菜单/Dialog 打开时，页面滚动导致组件跟随晃动；而添加 padding-right:17px 是为了抵消滚动条消失后页面内容突然右移的视觉偏移（浏览器默认滚动条宽度约17px），保证页面布局不会出现跳动。

如何规避这个行为？ #

HeadlessUI 的 Menu（下拉菜单）和 Dialog 组件都提供了 preventScroll 属性，默认值为 true，将其设为 false 即可禁用自动修改滚动条和 padding 的逻辑：

1. 下拉菜单（Menu 组件） #

import { Menu } from '@headlessui/react';

// 使用时添加 preventScroll={false}
<Menu preventScroll={false}>
  <Menu.Button>打开菜单</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a className={`${active ? 'bg-blue-500 text-white' : ''}`} href="/">
          选项1
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

2. Dialog 组件 #

import { Dialog } from '@headlessui/react';
import { useState } from 'react';

export default function ExampleDialog() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>
      
      <Dialog open={isOpen} onClose={() => setIsOpen(false)} preventScroll={false}>
        <Dialog.Panel>
          <Dialog.Title>弹窗标题</Dialog.Title>
          <p>弹窗内容</p>
        </Dialog.Panel>
      </Dialog>
    </>
  );
}

可选：动态控制行为 #

如果需要根据特定条件决定是否启用该逻辑，可以动态绑定 preventScroll 的值：

<Menu preventScroll={isMobile ? true : false}>
  {/* 菜单内容 */}
</Menu>

内容的提问来源于stack exchange，提问作者aboutjquery