스크롤 가능한 Div 내부의 요소를 클릭할 때 전체 페이지 스크롤을 방지하는 방법은 무엇입니까?

스크롤 가능한 Div 내에서 스크롤하는 방법

스크롤된 div 내의 요소를 클릭하면 전체 페이지가 스크롤되는 문제가 발생할 수 있습니다. div 대신 스크롤됩니다. 이 문제를 해결하려면 다음 단계를 활용하세요.

1. 상위 div를 기준으로 원하는 요소의 수직 오프셋을 계산합니다.

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

2. scrollTop을 활용하여 div를 지정된 위치로 스크롤합니다.

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

또는 프로토타입 JS 구현의 경우:

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

이 접근 방식은 div가 스크롤하여 원하는 요소를 표시하도록 합니다. 기본적으로 표시되지 않는 경우 상단 또는 최대한 아래쪽으로 표시됩니다.

위 내용은 스크롤 가능한 Div 내부의 요소를 클릭할 때 전체 페이지 스크롤을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!