【问题标题】:scroll-behavior:smooth not working in tailwind滚动行为:顺风不流畅
【发布时间】:2022-11-01 03:24:46
【问题描述】:

我正在使用 next.js 和 tailwind Css 构建我的投资组合。 我已经在 globals.css 文件中添加了 scroll-behavior : smooth 。在 Navbar 中,我曾经导航到主页,其余部分我使用 id 导航。但是,我只能在导航到主页时看到流畅的效果,其他的不起作用。请你帮助我好吗 ?谢谢

我想在导航时在我的页面中使用滚动平滑效果。

【问题讨论】:

  • 我已经更正了您的问题,并就如何使用 NextJS 处理 DOM 向您提供了建议。下次请允许我们在涉及 DOM 时查看您的 _app.js,因为它也可能由此而来。
  • 欢迎来到 StackOverflow。请花点时间阅读How to Askminimal reproducible example。祝你好运

标签: html css reactjs next.js tailwind-css


【解决方案1】:

您的问题来自于 Next.js 中的 <Link>。 默认情况下,<Link> 将转到顶部,然后向后滚动。您可以从Link Documentation 中阅读,这是完全可以预料的:当您让用户转到另一个页面时,您不希望他处于随机滚动位置,而是在该新页面的顶部。但是在这里,我们停留在同一个页面上,所以我们需要告诉 NextJS。

有一种方法可以防止这种行为,通过添加scroll={false} 来解决您的问题。但是关于 NextJS 是如何工作的以及你是如何实现这种平滑行为的还有其他问题。 (从那里,你最初的问题是固定的)

所以它看起来像: <Link href="#link" scroll={false}>

我建议您使用 NextJS 中包含的 _document.js 文件来操作 bodyhtml 属性。

根据您的示例,这是我的看法:

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html className="scroll-smooth">
      <Head />
      <body className="bg-[#ecf0f3] text-[#1f2937] tracking-wide ">
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

这样,您可以清理您的 CSS 并应用本机解决方案,您可以肯定的是,每一页(因为 _document.js 是接下来呈现的每个页面的“模板”)

您还应该删除 href 中#id 之前的“/”,因为它没有任何意义。

您可以阅读的链接

_document.js documentation

Tailwind Smooth Scroll

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多