Search code examples
htmlreactjsnext.jstailwind-cssnext.js13

scroll smooth doesn't work in laptop but work in mobile phone browser in nextjs website

I'm facing an issue with implementing smooth scrolling in my Next.js application using Tailwind CSS. The smooth scrolling works as expected on mobile browsers, but it doesn't seem to apply on desktop browsers like Chrome and Edge.

I've followed the Tailwind CSS documentation on scroll behavior (https://tailwindcss.com/docs/scroll-behavior) and applied the scroll-smooth class to the html tag in my layout.tsx file as recommended. However, despite trying various solutions, the smooth scrolling only works on mobile devices.

Here's a snippet from my layout.tsx file:

// layout.tsx

<html className="scroll-smooth">
  {/* ... */}
</html>

I've also tried using the !scroll-smooth class with the !important rule, but it doesn't seem to make a difference:


// layout.tsx

<html className="!scroll-smooth">
  {/* ... */}
</html>

I've ensured that the browsers I'm testing (Chrome and Edge) are up-to-date, and I haven't found any JavaScript interference that could be causing the issue.

If anyone has encountered a similar problem or has suggestions on how to troubleshoot and resolve this, I would greatly appreciate your help. Thank you!

Solution

  • I have also faced same problem scroll smooth only working on mobile browser but not in window 11. I fixed this by enabling the animation effects in window 11.

    To Enable it.

    1)Press Window Logo+U at same time => it will open Accessibility window.

    2)Click on visual Effects=> then if my guess it right animation effects toggle is off you need to enable that and check again in browser.

    3)Hope this will fix your problem.