Résoudre les problèmes de défilement automatique pour le conteneur de débordement dans une application Nuxt

Cet article explique comment j'ai résolu le problème de défilement automatique causé par le conteneur de débordement dans le corps non défilant de l'application Nuxt et amélioré l'expérience utilisateur lorsque le site Web défile.

Table des matières

• Table des matières
• Conception initiale
• Question
• Solution
• Résumé

Conception initiale

Lors de la création de mon site Web à l'aide de Nuxt.js, ma conception initiale était de rendre uniquement le conteneur de contenu principal défilable, tandis que l'en-tête et le pied de page restaient fixes - sans utiliser le positionnement fixed ou absolute du CSS.

Pour ce faire, j'ai utilisé une combinaison des propriétés CSS `flex` et `overflow`, en commençant par la balise `body` :

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

dans la mise en page 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>

Nous devons également définir `top : 0` et `z-index` pour garantir que l'en-tête reste en haut de la page et apparaît au-dessus des autres éléments.

C'est ça ! Les pages ont désormais l'en-tête épinglé en haut et le contenu défile automatiquement en fonction des changements d'itinéraire ou des liens d'ancrage HTML, tirant parti de l'effet de transition fluide par défaut du navigateur.

---

Résumé

Dans cet article, je partage comment j'ai résolu le problème de défilement automatique dans mon application Nuxt causé par un conteneur de débordement dans un corps non défilant. Ce problème provient d'une combinaison de « overflow » et de la propriété CSS à hauteur fixe, et il peut affecter n'importe quel projet Web, pas seulement ceux utilisant Nuxt ou Vue Router. En fonction de vos objectifs, la solution peut être aussi simple que de supprimer cette combinaison CSS ou de mettre en œuvre une solution de contournement plus complexe, comme le déclenchement manuel de « scrollTo » sur le conteneur déroulant cible. Alors la prochaine fois que vous rencontrerez ce problème, saurez-vous comment le résoudre ?!

 ? Découvrez Vue 3 et TypeScript avec mon nouveau livre, Learn Vue !

 ? Si vous souhaitez communiquer avec moi de temps en temps, suivez-moi sur X | LinkedIn.

Vous aimez cet article ou le trouvez-vous utile ? Partagez-le ??

<code>      </div></code>

<code></code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!