Scroll Utilities

import { blockScroll, unblockScroll } from '@bbc/front-end-kit/js/utils/scroll';

This file contains utility functions for programmatically blocking and unblocking page scroll, useful for modals, overlays, and other UI patterns that require scroll locking.

Warning

This is a very simple implementation of scroll blocking. It's not perfect and may not work in all cases.

blockScroll

Prevents the page from scrolling by fixing the body position and hiding overflow.

Example

import { blockScroll } from '@bbc/front-end-kit/js/utils/scroll';

// Prevent the user from scrolling the page (e.g., when opening a modal)
blockScroll();

Restores the page's scrollability after it was blocked by blockScroll, and returns the user to their previous scroll position. Scroll position is restored by reading body.style.left/body.style.top and parsing them as integers via parseInt — values without a px unit or non-numeric strings will parse as 0 and the position will not be restored correctly.

Example

import { unblockScroll } from '@bbc/front-end-kit/js/utils/scroll';

// Allow the user to scroll again (e.g., when closing a modal)
unblockScroll();