스크롤링 Div 내부의 특정 요소로 스크롤하는 방법은 무엇입니까?

스크롤링 div 내에서 요소를 찾아 스크롤하는 방법

스크롤링 div로 작업할 때 특정 요소로 스크롤해야 하는 경우가 많습니다. 이벤트가 발생할 때 div 내의 요소입니다. 그러나 단순히 요소 자체에서 scrollIntoView 함수를 사용하면 전체 페이지를 스크롤하는 등의 예기치 않은 동작이 발생할 수 있습니다.

이 문제를 해결하려면 다음 단계를 수행할 수 있습니다.

대상 요소의 상단 오프셋 가져오기:

대상 요소의 상단과 상위 스크롤 div 컨테이너의 상단 사이의 수직 거리를 계산합니다. 이 값을 상단 오프셋이라고 합니다.

<code class="javascript">var targetElement = document.getElementById('element_within_div');
var topOffset = targetElement.offsetTop;</code>

Div의 스크롤 위치 설정:

스크롤 div의 scrollTop 속성을 사용하여 스크롤 위치를 설정합니다. 대상 요소의 상단 오프셋 위치:

<code class="javascript">document.getElementById('scrolling_div').scrollTop = topOffset;</code>

이렇게 하면 대상 요소가 상단에 있거나 div의 표시 영역 내에서 가능한 상단에 가깝도록 div가 스크롤됩니다.

또는 Prototype JS 프레임워크를 사용하는 경우 다음 코드를 사용할 수 있습니다.

<code class="javascript">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>

이 단계를 따르면 스크롤하는 div가 부드럽게 이동하여 지정된 요소를 표시하는지 확인할 수 있습니다. 의도하지 않은 페이지 스크롤을 방지합니다.

위 내용은 스크롤링 Div 내부의 특정 요소로 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!