Resolving Auto-Scroll issues for overflow container in a Nuxt app

This article shares how I solved the automatic scrolling problem caused by the overflow container in the non-scrolling body in the Nuxt application, and improved the user experience when the website scrolls.

Table of Contents

• Table of Contents
• Initial Design
• Question
• Solution
• Summary

Initial Design

When building my website using Nuxt.js, my initial design was to make only the main content container scrollable, while the header and footer remained fixed - without using CSS's fixed or absolute positioning.

To do this, I used a combination of the CSS `flex` and `overflow` properties, starting with the `body` tag:

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

in default.vue layout:

<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>

We also need to set `top: 0` and `z-index` to ensure that the header stays at the top of the page and appears above other elements.

That’s it! Pages now have the header pinned at the top, and content automatically scrolls based on route changes or HTML anchor links, taking advantage of the browser's default smooth transition effect.

---

Summary

In this article, I share how I solved the auto-scrolling issue in my Nuxt app caused by an overflow container within a non-scrolling body. This issue stems from a combination of `overflow` and the fixed-height CSS property, and it can affect any web project, not just those using Nuxt or Vue Router. Depending on your goals, the solution may be as simple as removing this CSS combination, or implementing a more complex workaround, such as manually triggering `scrollTo` on the target scrollable container. So next time you encounter this problem, you know how to fix it?!

? Learn about Vue 3 and TypeScript with my new book, Learn Vue!

? If you would like to connect with me sometimes, please follow me on X | LinkedIn.

Like this article or find it helpful? Share it ?? ?

<code>      </div></code>

<code></code>

The above is the detailed content of Resolving Auto-Scroll issues for overflow container in a Nuxt app. For more information, please follow other related articles on the PHP Chinese website!