解决 Nuxt 应用程序中溢出容器的自动滚动问题

本文分享了我如何解决 Nuxt 应用中，由于非滚动主体内的溢出容器导致的自动滚动问题，并提升了网站滚动时的用户体验。

目录

• 目录
• 初始设计
• 问题
• 解决方案
• 总结

初始设计

在使用 Nuxt.js 构建我的网站时，我的初始设计是仅使主要内容容器可滚动，而页眉和页脚保持固定——不使用 CSS 的 fixed 或 absolute 定位。

为此，我结合使用了 CSS 的 `flex` 和 `overflow` 属性，从 `body` 标签开始：

<code>body {
  overflow: hidden;
  height: 100%;
}</code>

在 default.vue 布局中：

<code><div>



<p>在上面的代码中，我使用 `overflow-hidden` 确保主体不可滚动，同时将高度静态设置为 100%。主容器设置为 `flex-1` 以在页眉和页脚之后扩展并填充剩余空间。我使用 `overflow-y-auto` 使容器仅垂直滚动。此设置允许页面根据初始设计按预期工作。</p>

<p>但是，当我将目录添加到文章页面时，问题出现了。目录是文章内章节标题链接的列表，点击链接应该滚动到相应的章节。不幸的是，它没有。</p>

<video controls="" name="media"></video><p>此外，当使用 HTML 锚点（#）刷新文章页面中的 URL 时，浏览器不会滚动到所需的章节。从另一个页面返回文章页面也无法自动滚动到页面顶部。例如，从**文章**页面导航到**演讲**页面，用户停留在底部而不是顶部。</p>

<video controls="" name="media"></video><p>此外，我还收到关于页脚<em>固定</em>在页面底部的投诉，一些用户在阅读文章时发现这很烦人。</p>

<p>显然，我需要更改我的设计并解决这些问题。但这很简单吗？让我们拭目以待。</p>

<h2>

问题
</h2>

<p>Nuxt.js 3 使用 Vue Router 处理应用程序路由，包括在页面之间导航时的自动滚动，并具有平滑的过渡效果。所以，它应该可以工作，对吧？</p>

<p>不幸的是，它没有。</p>

<p>我尝试了不同的解决方法，包括使用 Vue Router 自定义滚动行为，使用 `scrollBehaviorType`，甚至 `window.scrollTo`。这些方法都没有奏效。</p>

<p>那么，有没有办法解决这个问题呢？</p>

<h2>

解决方案
</h2>

<p>经过一番研究，我发现这个问题是由 `overflow` 和 `height` CSS 属性的组合引起的。当 `height` 设置为固定值（如 100%）并且 `body` 标签上的 `overflow` 设置为 `hidden` 时，页面右侧显示的滚动条不是针对 `body` 标签的，而是针对主容器的。</p>

<p>在页面或章节之间导航时，浏览器默认情况下会尝试滚动 `body` 标签。由于主体不可滚动，浏览器不知道要滚动哪个容器，从而导致问题。</p>

<p>有几种方法可以解决此问题，例如查询主容器的 DOM 引用并使用 `scrollTo` 方法在路由更改时手动将容器滚动到所需的章节。但是，这种方法并不理想——它实现起来很复杂，而且不是一个好习惯。</p>

<p>一个更简单的解决方案是从 `body` 标签中删除 `height: 100%` 和 `overflow: hidden` 属性，并对页眉使用 `position: sticky` 以使其保持固定在顶部：<br></br></p>

```css
body {
  /* overflow: hidden; */
  /* height: 100%; */
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
}</code>

我们还需要设置 `top: 0` 和 `z-index` 以确保页眉保持在页面顶部并在其他元素上方显示。

就是这样！页面现在将页眉固定在顶部，并且内容会根据路由更改或 HTML 锚点链接自动滚动，利用浏览器的默认平滑过渡效果。

---

总结

在本文中，我分享了我如何解决 Nuxt 应用中由非滚动主体内的溢出容器引起的自动滚动问题。这个问题源于 `overflow` 和固定高度 CSS 属性的组合，它可能会影响任何 Web 项目，而不仅仅是使用 Nuxt 或 Vue Router 的项目。根据您的目标，解决方案可能只需简单地删除此 CSS 组合，或实施更复杂的解决方法，例如在目标可滚动容器上手动触发 `scrollTo`。因此，下次遇到此问题时，您就知道如何解决它了?！

? 通过我的新书《学习 Vue》了解 Vue 3 和 TypeScript！

? 如果您想有时与我联系，请在 X | LinkedIn 上关注我。

喜欢这篇文章或觉得它有帮助吗？分享它 ?? ?

<code>      </div></code>

<code></code>

以上是解决 Nuxt 应用程序中溢出容器的自动滚动问题的详细内容。更多信息请关注PHP中文网其他相关文章！