JQuery ScrollTop() работает на оконном событие, но не Div (проверено в хроме)

Question

Работа на этой странице в данный момент

https://www.cliquenext.com/sandbox.php

У нас есть два Div столбцов. #mainpage (справа) и #sidebar влево.

Цель состоит в том, чтобы, если я прокручиваю в правой колонке, левые прокрутки тоже. Если я прокручиваю в левом столбце, правый свиток тоже. Оба в то же время.

Когда я использую $ (окно) .ScrollTop - он отлично работает. Когда я использую $ («# sidebar»). Scrolltop - он не срабатывает.

Следующий код работает прокруткой #mainpage при прокрутке #sidebar.

$("#sidebar").scroll(function(event){ 
    event.preventDefault(); 

    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
     // downscroll code 

     var y = $(window).scrollTop(); //your current y position on the page 
     $(window).scrollTop(y+10); 

    } else { 
     // upscroll code 

     var y = $(window).scrollTop(); //your current y position on the page 
     $(window).scrollTop(y-10); 


    } 
    lastScrollTop = st; 
}); 

Следующий код не работает. При прокрутке на # главной странице #sidebar также должен прокручиваться. Но его нет.

$("#mainpage").scroll(function(event){ 
    event.preventDefault(); 

    var st2 = $(this).scrollTop(); 
    if (st2 > lastinfoscroll){ 
     // downscroll code 

     var y = $("#sidebar").scrollTop(); //your current y position on the page 
     $("#sidebar").scrollTop(y+10); 

    } else { 
     // upscroll code 

     var y = $("#sidebar").scrollTop(); //your current y position on the page 
     $("#sidebar").scrollTop(y-10); 


    } 
    lastinfoscroll = st2; 
}); 

Я хотел бы определить, когда прокручивается один из divs, а затем прокручиваем оба divs.

Я не могу понять, как получить огонь на div, чтобы я мог прокручивать оба divs сразу. Застрял в этой проблеме целую вечность. Также не хотите использовать Animate.

Любая помощь была бы принята с благодарностью. Cheers

Answer 1

.scroll() стреляет по divs, и .scrollTop() тоже работает на них. Вы можете упростить код: удалить кэширование позиции прокрутки, и вычисление тока против желаемой позиции, и эта проблема уходит :)

Сниппает ниже синхронизирует положение прокрутки во всех $containers:

$(function() { 
    var $containers = $(".container"); 

    $containers.scroll(_.throttle(syncScroll, 20, { leading: false })); 

    function syncScroll() { 
    var $this = $(this), 
     $other = $containers.not(this), 
     target = $this.scrollTop(); 

    if ($other.scrollTop() !== target) { 
     $other.scrollTop(target); 
    } 

    } 

}); 

вы может видеть это в действии в this demo (code view).

Дросселирование важно, иначе инерция прокрутки с помощью колеса мыши исчезнет (и вы нажмете процессор на события прокрутки мусора). Я использую Underscore здесь (_.throttle()), но любая другая реализация будет выполнена. Вы можете контролировать степень отставания со вторым аргументом, в настоящее время установленным на 20 мс.

В примере здесь синхронизируется абсолютная позиция прокрутки, поэтому это означает, что прокручиваемый контент имеет одинаковую высоту везде. Для контента с разной высотой вам нужно пройти быстрое преобразование и выразить целевое положение в процентах, прежде чем преобразовать его обратно в абсолютное значение, чтобы прокрутить поле $other.