本文分享了我如何解決 Nuxt 應用中，由於非滾動主體內的溢出容器導致的自動滾動問題，並提升了網站滾動時的用戶體驗。
在使用 Nuxt.js 建立我的網站時，我的初始設計是僅使主要內容容器可滾動，而頁眉和頁腳保持固定——不使用 CSS 的 fixed 或 absolute 定位。
<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 應用中由非滾動主體內的溢出容器引起的自動滾動問題。這個問題源自於 `overflow` 和固定高度 CSS 屬性的組合，它可能會影響任何 Web 項目，而不僅僅是使用 Nuxt 或 Vue Router 的項目。根據您的目標，解決方案可能只需簡單地刪除此 CSS 組合，或實作更複雜的解決方法，例如在目標可捲動容器上手動觸發 `scrollTo`。因此，下次您遇到此問題時，您就知道如何解決它了?！
? 透過我的新書《學習 Vue》了解 Vue 3 和 TypeScript！
? 如果您想有時與我聯繫，請在 X | LinkedIn 上關注我。
喜歡這篇文章或覺得它有幫助嗎？分享它 ?? ?
<code> </div></code>
<code></code>
以上是解決 Nuxt 應用程式中溢出容器的自動滾動問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
