전체 페이지를 스크롤하지 않고 div를 특정 요소로 자동 스크롤하려면 어떻게 해야 합니까?

Div 내 요소로 스크롤

스크롤된 div를 클릭하면 자동으로 해당 요소로 스크롤되도록 프로그래밍하려고 합니다. scrollIntoView(true)를 활용하면 전체 페이지가 스크롤되어 당황스러울 수 있습니다.

해결책:

이 문제를 해결하려면 페이지의 상단 오프셋을 결정해야 합니다. 부모인 스크롤 div 컨테이너를 기준으로 하는 대상 요소입니다. 이는 다음을 통해 달성됩니다.

<code class="js">var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;</code>

이제 topPos에는 div 상단과 표시하려는 요소 사이의 픽셀 거리가 포함됩니다.

다음으로, div에 scrollTop을 사용하여 해당 위치로 스크롤하도록 지시합니다. :

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

Prototype JS에서는 다음과 같이 번역됩니다.

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

이 작업은 div를 스크롤하여 지정된 요소를 상단에 정렬하거나 스크롤이 정렬되지 않는 경우 최대한 가깝게 정렬합니다. 정상에 도달하는 것은 허용되지 않습니다.

위 내용은 전체 페이지를 스크롤하지 않고 div를 특정 요소로 자동 스크롤하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!