고정 위치 목록에서 ScrollIntoView(true)를 사용할 때 전체 페이지가 이동하는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

고정 위치 목록에서 ScrollIntoView(true)를 사용할 때 전체 페이지가 이동하는 이유는 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-16 07:52:02

원래의

645명이 탐색했습니다.

Why Does the Entire Page Move When Using ScrollIntoView(true) in a Fixed-Position List?

ScrollIntoView() 및 의도하지 않은 페이지 이동

질문:

ScrollIntoView(true)를 사용하여 항목을 스크롤할 때 고정 위치 목록에서 볼 때 전체 페이지가 약간 이동하는 이유는 무엇입니까?

컨텍스트:

고정 위치 목록(#listOfDivs)은 AJAX를 통해 로드됩니다. 모바일 장치의 Safari. 아래쪽 스크롤에 ScrollIntoView(false)를 사용하면 예상대로 작동하지만 위쪽 스크롤에 ScrollIntoView(true)를 사용하면 전체 페이지가 이동합니다.

구조:

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

로그인 후 복사

<div>

로그인 후 복사

답변:

ScrollIntoView(true)의 기본 동작은 뷰포트 상단에서 요소를 스크롤하여 표시하는 것입니다. 전체 페이지가 이동하는 것을 방지하려면 동작 옵션을 부드럽게, 차단 옵션을 가장 가까운 것으로, 인라인 옵션을 시작으로 지정하세요.

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

로그인 후 복사

문서:

ScrollIntoView 메서드에 대한 자세한 내용은 MDN(Mozilla 개발자 네트워크) 설명서를 참조하세요: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

위 내용은 고정 위치 목록에서 ScrollIntoView(true)를 사용할 때 전체 페이지가 이동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!