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

Have you tried applying the dark mode and over scroll styling to the body or :root element? Here’s details on how to do so for a similar use case in Tailwind CSS: https://stackoverflow.com/questions/72568312/tailwind-dark-mode-isnt-extending-fully-when-scrolling-all-the-way-on-page — ionosphere, May 21 '23 at 16:38

score 0 · Answer 1 · answered May 21 '23 at 01:01

0

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!

answered May 21 '23 at 01:01

Azureian

11
2

Thanks but it doesn't fix it. – grabury May 22 '23 at 01:32

How to prevent overscroll bounce?

1 Answers1