How To Lock Scroll

import { Layout } from '@/layout';

export const meta = { title: 'How can I lock scroll in my application?', description: 'Use react-remove-scroll library to lock scroll in your application', slug: 'how-to-lock-scroll', category: 'common', tags: ['lockScroll', 'scroll lock', 'remove scroll', 'scrollbar'], created_at: 'February 15, 2024', last_updated_at: 'February 15, 2024', };

export default Layout(meta);

Mantine components use the react-remove-scroll library to lock scroll. You can use it in your application to lock scroll. For your convenience, the @mantine/core package exports the RemoveScroll component:

import { RemoveScroll } from '@mantine/core';

function App() {
  return (
    <RemoveScroll>
      <div>Content</div>
    </RemoveScroll>
  );
}

The component supports all props that are supported by the react-remove-scroll library. You can find the full list of props in the official documentation.