Nuxt アプリのオーバーフロー コンテナの自動スクロールの問題を解決する

この記事では、Nuxt アプリケーションの非スクロール本体のオーバーフロー コンテナーによって引き起こされる自動スクロールの問題を私がどのように解決し、Web サイトがスクロールするときのユーザー エクスペリエンスを改善したかを共有します。

目次

• 目次
• 初期デザイン
• 質問
• 解決策
• 概要

初期デザイン

Nuxt.js を使用して Web サイトを構築するとき、私の最初の設計は、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 アプリの自動スクロールの問題を私が解決した方法を共有します。この問題は、「オーバーフロー」と固定高さの CSS プロパティの組み合わせが原因で発生し、Nuxt や Vue Router を使用する Web プロジェクトだけでなく、あらゆる Web プロジェクトに影響を与える可能性があります。目標に応じて、解決策はこの CSS の組み合わせを削除するなどの単純な場合もあれば、ターゲットのスクロール可能なコンテナで `scrollTo` を手動でトリガーするなど、より複雑な回避策を実装する場合もあります。では、次にこの問題に遭遇したとき、それを解決する方法を知っていますか?!

?私の新しい本『Learn Vue』で Vue 3 と TypeScript について学びましょう!

?時々私とつながりたい場合は、X | LinkedIn でフォローしてください。

この記事が好きですか、それとも役に立ちますか?シェアしてください??

<code>      </div></code>

<code></code>

以上がNuxt アプリのオーバーフロー コンテナの自動スクロールの問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。