JavaScript에서 제한된 Div 내의 요소로 스크롤하는 방법은 무엇입니까?

Bounded Divs 내의 요소로 스크롤

웹 개발에서 페이지의 요소 내 스크롤은 사용자 경험에 매우 중요할 수 있습니다. 개발자가 직면하는 일반적인 문제 중 하나는 스크롤된 div 내의 요소로 스크롤하는 것입니다.

문제:

사용자가 스크롤된 div 내의 요소를 클릭하면 자동으로 표시되기를 원합니다. 보려면 스크롤하세요. 그러나 다음 JavaScript 방법을 사용하면

document.getElementById(chr).scrollIntoView(true);

div 자체를 포함하여 전체 페이지가 스크롤됩니다. 이러한 동작은 바람직하지 않습니다.

해결책:

div만 스크롤하여 대상 요소를 보려면 해당 요소를 기준으로 요소의 상단 오프셋을 계산해야 합니다. parent(스크롤된 div 컨테이너).

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

이제 변수 topPos에는 스크롤하는 div의 상단과 대상 요소 사이의 거리가 포함됩니다.

div를 해당 위치로 스크롤하려면, scrollTop 사용:

document.getElementById('scrolling_div').scrollTop = topPos;

Prototype Framework:

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

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

이 메소드는 대상 요소가 정확히 상단에 오도록 div를 스크롤하거나 div 내에서 볼 수 있도록 최대한 아래로 스크롤합니다.

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