Nuxt 앱의 오버플로 컨테이너에 대한 자동 스크롤 문제 해결

이 글에서는 Nuxt 애플리케이션의 비스크롤링 바디에 있는 오버플로 컨테이너로 인해 발생하는 자동 스크롤 문제를 해결하고 웹사이트 스크롤 시 사용자 경험을 개선한 방법을 공유합니다.

목차

• 목차
• 초기 디자인
• 질문
• 솔루션
• 요약

초기 디자인

Nuxt.js를 사용하여 웹사이트를 구축할 때 초기 디자인은 CSS의 fixed 또는 absolute 위치 지정을 사용하지 않고 머리글과 바닥글은 고정된 상태로 유지하면서 기본 콘텐츠 컨테이너만 스크롤 가능하게 만드는 것이었습니다.

이를 위해 저는 `body` 태그부터 시작하여 CSS `flex`와 `overflow` 속성의 조합을 사용했습니다.

<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 속성의 조합으로 인해 발생하며 Nuxt 또는 Vue Router를 사용하는 웹 프로젝트뿐만 아니라 모든 웹 프로젝트에 영향을 미칠 수 있습니다. 목표에 따라 솔루션은 이 CSS 조합을 제거하거나 대상 스크롤 가능 컨테이너에서 `scrollTo`를 수동으로 트리거하는 등 더 복잡한 해결 방법을 구현하는 것만큼 간단할 수 있습니다. 다음에 이 문제가 발생하면 해결 방법을 알고 계시나요?!

? 새 책인 Learn Vue로 Vue 3와 TypeScript에 대해 알아보세요!

? 가끔 저와 소통하고 싶으시면 X |

이 기사에 좋아요를 누르거나 도움이 되셨나요? 공유 ?

<code>      </div></code>

<code></code>

위 내용은 Nuxt 앱의 오버플로 컨테이너에 대한 자동 스크롤 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!