How to prevent overscroll bounce?

Question

I have a basic React Tailwind page:

export default function Home() {
  return (
    <div className="bg-gray-900 h-screen overscroll-none">
      <main className="text-white">
        <h2>Title</h2>
        <p>body</p>
      </main>
    </div>
  )
}

The entire page is black but when I scroll down it pulls the top of the page down (overscroll) revealing a white strip at the top.

How can I prevent this? I have tried overscroll-none

Answer 1

export default function Home() {
  return (
    <div className="bg-gray-900 h-screen overscroll-none overflow-hidden">
      <main className="text-white">
        <h2>Title</h2>
        <p>body</p>
      </main>
    </div>
  )
}

Using overflow-hidden stops overflow. I hope this helps!