Синхронизация двух скролов
 

Приветствую! помогите пожалуйста студенту:

есть блок в который динамически подгружаются элементы(в блоке всегда присутствует только три элемента из скольки угодного колическтва т.е. я их заменяю)
и есть скрол

на скрол и на блок повешены события onscroll. Я кручу скрол и "вертится" блок.
я мотаю колёсиком мыши блок и должен крутиться скрол.(но у меня это отрабатывает некоректно из за того, что один onscrol вызывает другой)
Подскажите как эту проблему решить?


Вот мы вешаем события:

this.scrollControl.onscroll = function (e) {
            if (delay) {
                scroller.timeStamp = e.timeStamp;
                var timeout = setTimeout(function () { scroller.syncContent(); }, delay);
            } else {
                scroller.syncContent();
            }
        };

        this.scrollWrapper.onscroll = function (e) {
            scroller.syncControl();
        };

вот функция синхронизации скрола при прокрутки блока:

syncControl: function () {

        var body = document.body;
        var offset = this.scrollWrapper.scrollTop;//Замеряем отступ сверху

        var chunks = this.chunkContainer.children;//Кладём в переменую массив элементов с классом .chunk

        var chunkElement = null;
        var chunk = null;
        if (chunkElement = chunks[2]) {
            chunk = $(chunkElement);

            if (offset > chunk.position().top - this.viewportHeight) {
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                //var chunkIndex = +chunk.data('chunk');
                var chunkOffset = chunk.position().top
                
                var scrollOffset = this.scrollWrapper.scrollTop;
                this.unloadChunks(chunkIndex);
                this.getChunk(chunkIndex + 1);
                //console.log(scrollOffset, chunkOffset, chunk.position().top, chunk.height());
                //console.log(offset, 'down');

                this.scrollWrapper.scrollTop = scrollOffset - chunkOffset + chunk.position().top;
                var scrollPercent = this.scrollWrapper.scrollTop / (this.scrollWrapper.scrollHeight - this.scrollWrapper.offsetHeight);
                var verticalEdge = this.scrollPadding.offsetHeight - this.scrollControl.offsetHeight;
                if (this.scrollControl.scrollTop = verticalEdge) {
                    
                } else{
                    this.scrollControl.scrollTop = verticalEdge;
                }
                //this.scrollControl.scrollTop = this.scrollWrapper.scrollTop + this.getChunkOffset(chunkIndex)) /  this.getChunkHeight(chunkIndex)
            }
        } else if (chunkElement = chunks[1]) {
            chunk = $(chunkElement);
            if (offset > chunk.position().top - this.viewportHeight) {
                //var chunkIndex = +chunk.data('chunk');
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                var chunkOffset = chunk.position().top;
                this.unloadChunks(chunkIndex);
                this.getChunk(chunkIndex + 1);
                //console.log(this.scrollWrapper.scrollTop(), chunkOffset, chunk.position().top);
                //console.log(offset, 'down');
                //this.scrollWrapper.scrollTop(this.scrollWrapper.scrollTop() + chunkOffset - chunk.position().top);
            }
        }
        if (chunkElement = chunks[0]) {
            chunk = $(chunkElement);
            if (offset < this.viewportHeight) {
                var chunkIndex = parseInt(chunkElement.getAttribute('data-chunk'));
                //var chunkIndex = +chunk.data('chunk');
                var chunkOffset = chunk.position().top;
                if (chunkIndex > 0) {
                    this.unloadChunks(chunkIndex);
                    this.getChunk(chunkIndex - 1);
                }
                //this.scrollWrapper.scrollTop(this.scrollWrapper.scrollTop() + chunkOffset - chunk.position().top);
                //console.log(this.scrollWrapper.scrollTop(), chunkOffset, chunk.position().top);
                //console.log(offset, 'up');
            }
        }
    }

возможно надо проставить в обработке синхронизации блока с контролером, чтобы он как-то это отлавливал, но как я пока не придумал

syncContent: function () {
        
        if (this.delay && (new Date()).valueOf() - this.timeStamp < this.delay - 50) {//Для чего нужно это условие?
            return;
        }
        
        var body = document.body;
        //var offset = $(this.scrollControl).scrollTop();//Замеряем отступ сверху при мещении тут должно быть целое число
        var offset = window.pageYOffset || this.scrollControl.scrollTop || body.scrollTop;
        //var box1 = this.scrollControl.getBoundingClientRect().top;
        //var clientTop = this.scrollControl.clientTop || body.clientTop || 0;
        //var offset = box1 + scrollTop + clientTop;
        var progress = this.getChunkProgress(offset);


        this.unloadChunks(progress.index);
        var offsetHeight = 0;
        var prevChunk = this.getChunk(progress.index - 1);
        if (prevChunk.length) {
            offsetHeight = prevChunk.position().top;
            //offsetHeight = prevChunk.offsetHeight = prevChunk.position().top;;
        }
        var chunk = this.getChunk(progress.index);
        if (!chunk || !chunk.length) {
            return;
        }
        //console.log(prevChunk, chunk, progress.index);

        //setTimeout(function () { chunk.addClass('entered'); }, 100);
        //chunk.addClass('entered');
        //if (offset > this.controlOffset) {
        //    chunk.addClass('up');
        //}
        this.controlOffset = offset;

        if (prevChunk && prevChunk.length) {
            offsetHeight = prevChunk.position().top;
            //offsetHeight = prevChunk.getBoundingClientRect().top;
        } else {
            offsetHeight = chunk.position().top;
            //offsetHeight = chunk.getBoundingClientRect().top;
        }

        this.getChunk(progress.index + 1);

        var scrollOffset = chunk.position().top - offsetHeight + chunk.height() * progress.progress;
        //var scrollOffset = chunk.position().top - offsetHeight + chunk.height() * progress.progress;
        $(this.scrollWrapper).scrollTop(scrollOffset);
        
    },

Александр Щербаков,

onscroll = function (e) {e.stopPropagation();