Scroll Helpers

These Scroll Helper Functions are used for Scroll Behaviours

Enable/Disable Scroll

scroll.ts

export function disableScroll() {
  document.body.style.maxHeight = '100vh'
  document.body.style.overflow = 'hidden'
  document.body.scrollTop = document.documentElement.scrollTop = 0
}
 
export function enableScroll() {
  document.body.style.maxWidth = 'auto'
  document.body.style.overflow = 'visible'
}

Usage

modal.tsx

import { useEffect } from 'react'
 
useEffect(function () {
  disableScroll()
 
  return () => {
    enableScroll()
  }
}, [])

Last updated on February 18, 2023

Image Capitalize