{:js}` with base styling.
```js
function App() {
return (
<>
Floating element
);
}
```
## Props
```ts
interface FloatingOverlayProps {
lockScroll?: boolean;
}
```
### `lockScroll{:.keyword}`
Whether the `{:html}` is prevented from scrolling while the
overlay is rendered. Uses a robust technique that works on iOS
and handles horizontal scrolling.
```js
{/* floating element */}
```
If you need a more advanced solution,
[`react-remove-scroll`](https://www.npmjs.com/package/react-remove-scroll)
is a great option.
## 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.
```js
<>
```