[iframe] 새로고침 시 스크롤이 이상하게 튀는 문제, 진짜 원인은 iframe이었다

✅ 문제 상황

Next.js로 메인 페이지를 개발 중이었고,
페이지 구조는 대략 이렇게 구성돼 있었다:

• TopCarousel
• 브랜드 소개 영역
• 찾아오시는 길 (여기 안에 iframe으로 지도 삽입)

문제는 여기서 발생했다.

🔥 페이지를 새로고침하면,
👉 스크롤이 TopCarousel을 건너뛰고 갑자기 아래쪽 섹션으로 쭉 내려가버리는 현상이 발생!

처음엔 Swiper 캐러셀이 원인인가 싶어서 화살표부터 클릭 이벤트까지 다 확인했지만…
범인은 iframe이었다.

 

✅ 원인 분석

<iframe
  src="https://kko.to/VWh_80o8SJ"
  ...
/>

이런 식으로 iframe을 삽입했을 때 브라우저는 다음과 같이 반응:

• 페이지 렌더링 시 iframe이 DOM에 나타나면
• 브라우저가 iframe에 자동으로 포커스를 주는 경우가 있음
• 그러면 scrollIntoView() 효과가 자동 발생하면서
• 스크롤이 iframe 위치까지 튀는 것처럼 보이게 됨

---

✅ 해결 방법 (이거만 기억하면 된다!)

iframe이 스크롤에 영향을 주지 않게 하려면 아래 속성을 꼭 추가:

<iframe
  src="..."
  width="100%"
  height="450"
  style={{ border: 0, borderRadius: "12px" }}
  allowFullScreen
  loading="lazy"
  tabIndex={-1}       // ✅ 포커스 차단 핵심!
  sandbox=""          // ✅ iframe의 외부 스크립트/포커스 제한 (선택)
></iframe>

✅ 정리

설정	설명
tabIndex={-1}	브라우저가 iframe에 자동 포커스하지 않음
sandbox=""	iframe 내부의 script, focus 권한 제한
scrolling="no"	iframe 내부 스크롤도 방지 (옛날 브라우저 대응용)

✅ 왜 scrolling="no"가 안 먹히는가?

• scrolling="no"는 구식 속성 (HTML4/XHTML 시절 유산)
• modern 브라우저는 iframe의 스크롤 여부를 CSS의 overflow 스타일로 제어함
• Next.js나 React처럼 strict DOM 렌더링 환경에서는 scrolling 속성은 경고만 날리고 무시

---

💡 결론

iframe이 문제의 원인일 거라고는 진짜 상상도 못했는데,
페이지 스크롤이 이상하게 튄다면 iframe을 가장 먼저 의심하자.

참고로 나는 api를 쓸거라 결국 이 부분을 주석처리했다.