Menyelesaikan isu AutoTatal untuk bekas limpahan dalam apl Nuxt

Artikel ini berkongsi cara saya menyelesaikan masalah tatal automatik yang disebabkan oleh bekas limpahan dalam badan bukan tatal dalam aplikasi Nuxt, dan meningkatkan pengalaman pengguna apabila tapak web menatal.

Jadual Kandungan

• Jadual Kandungan
• Reka Bentuk Awal
• Soalan
• Penyelesaian
• Ringkasan

Reka Bentuk Awal

Apabila membina tapak web saya menggunakan Nuxt.js, reka bentuk awal saya adalah untuk menjadikan hanya bekas kandungan utama boleh ditatal, manakala pengepala dan pengaki kekal tetap - tanpa menggunakan kedudukan fixed atau absolute CSS.

Untuk melakukan ini, saya menggunakan gabungan sifat CSS `flex` dan `overflow`, bermula dengan teg `body`:

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

dalam default.vue reka letak:

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

Kami juga perlu menetapkan `top: 0` dan `z-index` untuk memastikan bahawa pengepala kekal di bahagian atas halaman dan muncul di atas elemen lain.

Itu sahaja! Halaman kini mempunyai pengepala disematkan di bahagian atas dan kandungan secara automatik menatal berdasarkan perubahan laluan atau pautan sauh HTML, mengambil kesempatan daripada kesan peralihan lancar lalai penyemak imbas.

---

Ringkasan

Dalam artikel ini, saya berkongsi cara saya menyelesaikan isu tatal automatik dalam apl Nuxt saya yang disebabkan oleh bekas limpahan dalam badan bukan tatal. Isu ini berpunca daripada gabungan `limpahan` dan sifat CSS ketinggian tetap, dan ia boleh menjejaskan mana-mana projek web, bukan hanya yang menggunakan Penghala Nuxt atau Vue. Bergantung pada matlamat anda, penyelesaiannya mungkin semudah mengalih keluar gabungan CSS ini atau melaksanakan penyelesaian yang lebih kompleks, seperti mencetuskan `scrollTo` secara manual pada bekas boleh tatal sasaran. Jadi lain kali anda menghadapi masalah ini, anda tahu bagaimana untuk menyelesaikannya?!

? Ketahui tentang Vue 3 dan TypeScript dengan buku baharu saya, Learn Vue!

? Jika anda ingin berhubung dengan saya kadangkala, sila ikuti saya di X |.

Suka artikel ini atau rasa ia membantu? Kongsi??

<code>      </div></code>

<code></code>

Atas ialah kandungan terperinci Menyelesaikan isu AutoTatal untuk bekas limpahan dalam apl Nuxt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!