---
name: ScrollLock
package: '@wordpress/components'
category: Utilities
status: stable
canonical: 'https://system.automattic.design/components/scrolllock/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-scrolllock--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/scroll-lock'
---

# ScrollLock

ScrollLock is a content-free React component for declaratively preventing
scroll bleed from modal UI to the page body. This component applies a
`lockscroll` class to the `document.documentElement` and
`document.scrollingElement` elements to stop the body from scrolling. When it
is present, the lock is applied.

```tsx
import { ScrollLock } from '@wordpress/components';
```

## Examples

### Default

```tsx
const Default = () => {
	const [ isScrollLocked, setScrollLocked ] = useState( false );
	const toggleLock = () => setScrollLocked( ! isScrollLocked );

	return (
		<div style={ { height: 1000 } }>
			<div
				style={ {
					overflow: 'auto',
					height: 240,
					border: '1px solid lightgray',
				} }
			>
				<StripedBackground>
					<div>
						Start scrolling down. Once you scroll to the end of this
						container with the stripes, the rest of the page will
						continue scrolling. <code>ScrollLock</code> prevents
						this &quot;scroll bleed&quot; from happening.
					</div>
					<ToggleContainer>
						<Button
							__next40pxDefaultSize
							variant="primary"
							onClick={ toggleLock }
						>
							Toggle Scroll Lock
						</Button>
						{ isScrollLocked && <ScrollLock /> }
						<p>
							Scroll locked:{ ' ' }
							<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
						</p>
					</ToggleContainer>
				</StripedBackground>
			</div>
		</div>
	);
};
```