ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • jQuery Dual Scroll 스크롤바 2개 동시에 움직이기
    카테고리 없음 2018. 2. 19. 16:17


    http://hugoware.net/snippets/jquery-dual-scroll


    html


    css



    .div01{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
    .div02{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
    


    jQuery


    var tbox1 = $('.tlans-box .txt-box .txtarea-view.tbox1');
    var tbox2 = $('.tlans-box .txt-box .txtarea-view.tbox2');
    
    var height = parseInt(tbox2.css('height'));
    
    var hold = false;
    var window_scroll = true;
    tbox1.add(tbox2)
       .mouseenter(function() { window_scroll = false; })
       .mouseleave(function() { window_scroll = true; });
    
    var locked = false;
    var sync_to = function(source, target) {
       if (locked) { return locked = false, true; }
       locked = true;
    
       var percent = source.scrollTop() / (source[0].scrollHeight - height);
       var top = (target[0].scrollHeight - height) * percent;
       target[0].scrollTop = top;
    }
    
    tbox1.scroll(function(e) { sync_to.call(e, tbox1, tbox2); });
    tbox2.scroll(function(e) { sync_to.call(e, tbox2, tbox1); });
    


Designed by Tistory.