унифицированные полосы прокрутки для двух панелей (div)

У меня есть требование, когда мне нужно синхронизировать прокрутку для двух разделов, которые находятся рядом друг с другом. Что было бы лучшим способом добиться этого?

Спасибо, Крис. P.S. Сейчас оба элемента div имеют свои собственные таблицы и/или элементы div, внутри которых всегда есть полоса прокрутки.


person ChrisOdney    schedule 04.10.2012    source источник


Ответы (1)


Вы могли бы просто добавить прослушиватель событий scroll, а затем синхронизировать их оттуда? Пример

function keepInSync() {
    var elements = [];
    var sync = function(e) {
        var target = e.target;

        for (var k = 0, l = elements.length; k < l; k++) {
            var element = elements[k];
            if (element === target) continue;
            element.scrollTop = target.scrollTop;
            element.scrollLeft = target.scrollLeft;
        }
    };

    for (var k = 0, l = arguments.length; k < l; k++) {
        var element = arguments[k];
        if (document.addEventListener) {
            element.addEventListener('scroll', sync);
        } else {
            element.attachEvent('onscroll', sync);
        }
        elements.push(element);
    }
}
person Nathaniel    schedule 04.10.2012
comment
Спасибо! Я слышал, что прослушивание события прокрутки плохо влияет на производительность, и вместо этого предлагается использовать тайм-ауты: ejohn.org/blog/learning-from-twitter - person ChrisOdney; 09.10.2012