프로그래밍 언어/Javascript

Javascript) Element 여러개의 스크롤바 동시에 움직이는 방법

seungyoon 2022. 5. 12. 16:56

요소 두개 중 하나만 스크롤 해도 두개 다 같이 스크롤 하는 방법이 필요했다.

아래 방법이 핵심! 

내가 테스트한 방법을 첨부하겠다. 

var $divs = $('#items, #items2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

test.zip
0.00MB

아래는 실제 동작하는 예제 

화면 기록 2022-05-12 오후 4.55.40.mov
7.51MB

References