Vue2 vs Nuxt2: element 변동시 Scroll 동작 비교 (feat. anchor)

이슈 및 원인

컴포넌트 리스트가 있는 페이지에서 중간 요소를 삭제할 때, Vue2와 Nuxt2 프로젝트 간 스크롤 동작의 차이가 발생했다.

• Vue2에서는 삭제된 요소 아래의 컴포넌트가 위로 올라오며 시야가 바뀌는 현상이 발생
• Nuxt2에서는 현재 보고 있던 시야가 유지되고, 삭제된 위치에 위쪽 요소가 내려오거나 아래 요소가 자연스럽게 채워지는 형태로 동작

해당 차이는 overflow-anchor의 작동 방식이 DOM 구조에 따라 다르게 체감되는 데에서 기인하는 것으로 판단한다.

Vue2와 Nuxt2 모두 기본적으로 overflow-anchor: auto 상태이지만, 실제 스크롤 시 컴포넌트 삭제 등의 레이아웃 변화에 따라 체감되는 스크롤 보정 동작은 완전히 다르게 나타난다.

 

---

비교

항목	Vue2	Nuxt2
overflow-anchor 설정	auto (기본값)	auto (기본값)
anchor 동작 체감	없음처럼 느껴짐	auto처럼 정확히 동작함
요소 삭제 시 반응	삭제된 자리에 아래 요소가 올라오며 시야가 바뀜	시야를 고정한 채 위 요소가 내려오거나 아래 요소가 채워짐
사용자 체감	스크롤이 튄다	시야가 안정적으로 유지된다

 

---

 

작동 분석

Vue2: 구조가 단순하여 anchor 후보 부족

• Vue2는 #app 아래에 바로 컴포넌트들이 렌더링된다.
• 브라우저가 anchor로 잡을 수 있는 후보가 적거나 시야 밖 요소를 잡을 수 있다.
• 이로 인해 요소 삭제 시 scrollY는 바뀌고, 사용자의 시야도 달라짐 → anchor 미작동처럼 느껴짐

Nuxt2: 구조가 깊어 anchor 후보 다수

• Nuxt2는 기본적으로 #__nuxt > layout > page > component 구조를 가진다.
• 브라우저가 anchor로 잡을 만한 요소가 많고, 이 중 현재 시야에 있는 요소가 적합하게 anchor로 선택된다.
• 결과적으로 요소 삭제 시에도 scrollY는 살짝 변할 수 있지만 시야는 유지됨 → anchor가 정확히 작동함

 

🔍 적합한 anchor는 어떻게 판단할가?

크롬 엔진 기준으로 대략 이렇게 동작한다.

1. 뷰포트 안에 있는 요소
2. 레이아웃 변화에 따라 위치가 바뀔 수 있는 요소
3. overflow-anchor: auto가 적용되어 있는 요소
4. absolute/fixed 요소는 제외

• 구조가 깊고, 자연스럽게 의미 있는 <div>들이 많으면
• 적당한 요소가 뷰포트 안에 존재할 가능성도 높고
• 그 요소를 anchor로 삼아 스크롤 위치 보정을 잘 할 수 있게 된다.

 

---

💡 핵심 인사이트

둘 다 overflow-anchor: auto이지만, DOM 구조 차이로 브라우저가 인식하는 anchor의 위치가 달라진다.

Vue2는 anchor가 시야 밖 요소로 잡혀 효과가 없는 것처럼 보인다.
Nuxt2는 시야 안 요소가 anchor로 잘 잡혀 시야 유지가 잘 된다.

 

---

 overflow-anchor 개념 보충

• overflow-anchor는 scrollY를 고정하는 게 아니라, "anchor 요소의 뷰포트 내 위치를 유지"하는 속성이다.
• scrollY는 변할 수 있지만 시야(anchor)가 유지되면 anchor는 잘 작동한 것으로 볼 수 있다.
• 의도적으로 anchor를 조정하려면 overflow-anchor: none을 사용하여 제외가 가능하다.
  => Nuxt2프로젝트에서 해당 속성을 부여하면 Vue2와 같이 동작한다.
• 적용테스트 : https://developer.mozilla.org/ko/docs/Web/CSS/overflow-anchor

 

---

추가사항

🚫 현재 Chrome DevTools에서는 overflow-anchor 확인 불가

항목	상태
scroll-anchor 속성 시각화	❌ 2023~2024년 사이 Chrome DevTools에서 제거됨
DevTools Elements 패널에 표시 여부	❌ 현재는 표시되지 않음 (과거 실험 기능에서만 잠깐 지원)
CSS Styles 탭에서 직접 확인	✅ overflow-anchor 속성은 수동으로 확인 가능하지만, 브라우저가 어떤 요소를 anchor로 "선택했는지"는 확인 불가

 

 

 

📝 최종 정리

Nuxt2는 element 구조 덕분에 브라우저의 anchor 판단이 자연스럽게 잘 작동하고, Vue2는 구조 단순성으로 인해 anchor가 의도치 않게 무시되거나 작동하지 않는 것처럼 보이는 차이가 있다.

이는 사용자 경험에서 스크롤이 튀는 것과같은 UX로 이어지며, 필요시 overflow-anchor: none을 명시적으로 설정하거나 anchor 대상 요소를 설계적으로 고려해야 한다.