FloatingOverlay

为固定覆盖元素提供基本样式。

¥Provides base styling for a fixed overlay element.

import {FloatingOverlay} from '@floating-ui/react';

除了锁定主体滚动之外，这对于使内容变暗或阻止浮动元素后面的指针事件很有用。

¥This is useful to dim content or block pointer events behind a floating element, in addition to locking the body scroll.

用法

¥Usage

它渲染具有基本样式的 <div>。

¥It renders a <div> with base styling.

function App() {
  return (
    <>
      <FloatingOverlay />
      <div>Floating element</div>
    </>
  );
}

属性

¥Props

interface FloatingOverlayProps {
  lockScroll?: boolean;
}

`lockScroll`

渲染覆盖层时是否阻止 <body> 滚动。使用适用于 iOS 的强大技术并处理水平滚动。

¥Whether the <body> is prevented from scrolling while the overlay is rendered. Uses a robust technique that works on iOS and handles horizontal scrolling.

<FloatingOverlay lockScroll>
  {/* floating element */}
</FloatingOverlay>

故障排除

¥Troubleshooting

兄弟覆盖

¥Sibling Overlay

在可滚动上下文中使用锚点定位和覆盖层时，最好使覆盖层成为浮动元素的同级元素，而不是父容器。

¥When using anchor positioning and the overlay in scrollable contexts, prefer making the overlay a sibling of the floating element rather than a parent container.

这将确保浮动元素不会被覆盖层包含，从而允许其定位在其边界之外，从而防止滚动问题。它还允许叠加层独立地设置动画。

¥This will ensure the floating element does not get contained by the overlay, allowing it to be positioned out of its bounds, preventing scroll issues. It also allows the overlay to be independently animated.

<>
  <FloatingOverlay />
  <div ref={refs.setFloating} />
</>