한 div 내에서 스크롤하면 다른 div의 관련 단락으로 자동 스크롤됩니다.

Question

일부 단락 텍스트가 포함 된 세 개의 스크롤 가능한 div가 포함 된 프로젝트 작업 중입니다. 텍스트의 일부 문단은 서로 느슨하게 연관 될 수 있습니다. 내가 원했던 것은 독자가 말하자면 첫 번째 div 내에서 특정 단락으로 스크롤하면 다른 두 div는 자동으로 포함 된 텍스트의 관련 단락으로 스크롤한다는 것입니다. 이렇게하면 3 단락이 한 번에 표시되고 독자는 자신이 아래로 스크롤하여 div/text를 더 탐색하려고 결정할 수 있습니다. JQuery 플러그인을 사용하여 구현할 수 있습니까? 구현하려면 어떻게해야합니까?

미리 감사드립니다.

편집 : HTML/CSS에 대한 기본 지식이 있지만 jQuery를 처음 사용합니다.

Answer 1

이것은 (플러그인이없는) jQuery에서 가능합니다. 이렇게하려면 각 div의 onscroll 이벤트를 처리해야 할 것입니다. 요소 중 하나는 것 스크롤 때

$(document).ready(function() { 
    $('.ScrollingDiv').scroll(function() { 
     var CurScrollHeight = $(this).scrollTop(); 
     //alert('in scroll'); 
     $('.ScrollingDiv').each(function() { 
      //alert('in each'); 
      $(this).scrollTop(CurScrollHeight); 
     }); 
    }); 
}); 

이 코드는 페이지 ScrollingDiv의 종류와 각 요소의 onscroll 함수 핸들러를 적용 여기

간단한 JSFiddle는 이하의 코드를 시연 다른 모든 요소를 ​​찾고 스크롤 높이를 동일하게 설정하십시오.

상황에 따라해야 할 일은 각 div의 단락을 보는 데 필요한 스크롤 높이를 결정하는 방법입니다. 예를 들어 첫 번째 div는 200px, 두 번째는 400px 높이, 세 번째는 400px 높이가 될 수 있습니다. 150px 높이 등 ...

일단 내가 가지고 있으면 코드를 변경하면 기능에 맞게 제공됩니다. div의 ID를 설정하고 개별 요소를 찾고 필요한 단락의 높이를 정확하게 지정해야합니다.