Behebung von Auto-Scroll-Problemen für Überlaufcontainer in einer Nuxt-App

In diesem Artikel erfahren Sie, wie ich das Problem des automatischen Scrollens gelöst habe, das durch den Überlaufcontainer im nicht scrollbaren Textkörper in der Nuxt-Anwendung verursacht wurde, und wie ich das Benutzererlebnis beim Scrollen der Website verbessert habe.

Inhaltsverzeichnis

• Inhaltsverzeichnis
• Ursprüngliches Design
• Frage
• Lösung
• Zusammenfassung

Ursprüngliches Design

Als ich meine Website mit Nuxt.js erstellte, bestand mein ursprünglicher Entwurf darin, nur den Hauptinhaltscontainer scrollbar zu machen, während Kopf- und Fußzeile unverändert blieben – ohne die CSS-Positionierung fixed oder absolute zu verwenden.

Dazu habe ich eine Kombination aus den CSS-Eigenschaften „flex“ und „overflow“ verwendet, beginnend mit dem „body“-Tag:

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

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

Wir müssen außerdem „top: 0“ und „z-index“ festlegen, um sicherzustellen, dass die Kopfzeile oben auf der Seite bleibt und über anderen Elementen erscheint.

Das ist es! Auf den Seiten ist jetzt die Kopfzeile oben angeheftet, und der Inhalt scrollt automatisch basierend auf Routenänderungen oder HTML-Ankerlinks, wobei der standardmäßige sanfte Übergangseffekt des Browsers genutzt wird.

---

Zusammenfassung

In diesem Artikel erzähle ich, wie ich das Problem mit dem automatischen Scrollen in meiner Nuxt-App gelöst habe, das durch einen Überlaufcontainer in einem nicht scrollbaren Textkörper verursacht wurde. Dieses Problem ist auf eine Kombination aus „Überlauf“ und der CSS-Eigenschaft „Feste Höhe“ zurückzuführen und kann jedes Webprojekt betreffen, nicht nur diejenigen, die Nuxt oder Vue Router verwenden. Abhängig von Ihren Zielen kann die Lösung einfach darin bestehen, diese CSS-Kombination zu entfernen oder eine komplexere Problemumgehung zu implementieren, z. B. das manuelle Auslösen von „scrollTo“ für den scrollbaren Zielcontainer. Wenn Sie also das nächste Mal auf dieses Problem stoßen, wissen Sie, wie Sie es beheben können?!

? Erfahren Sie mehr über Vue 3 und TypeScript mit meinem neuen Buch „Learn Vue!“

? Wenn Sie manchmal mit mir in Kontakt treten möchten, folgen Sie mir bitte auf X |.

Gefällt Ihnen dieser Artikel oder finden Sie ihn hilfreich? Teilen ?? ?

<code>      </div></code>

<code></code>

Das obige ist der detaillierte Inhalt vonBehebung von Auto-Scroll-Problemen für Überlaufcontainer in einer Nuxt-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!