next js disable page scroll
Step 1: Install the necessary package
npm install --save body-scroll-lock
Step 2: Create a new file for the custom hook
Create a new file, for example, useLockBodyScroll.js
, and add the following code:
import { useLayoutEffect } from 'react';
import bodyScrollLock from 'body-scroll-lock';
export default function useLockBodyScroll() {
useLayoutEffect(() => {
const bodyElement = document.querySelector('body');
bodyScrollLock.disableBodyScroll(bodyElement);
return () => {
bodyScrollLock.enableBodyScroll(bodyElement);
};
}, []);
}
Step 3: Implement the custom hook in the desired page
In the page where you want to disable the scroll, import the custom hook and use it as follows:
import useLockBodyScroll from '../path/to/useLockBodyScroll';
function MyPage() {
useLockBodyScroll();
// Rest of the component logic
}
Step 4: Test the page
After implementing the custom hook, test the page to ensure that the scroll is disabled as expected.