Приветствую! помогите пожалуйста студенту:
есть блок в который динамически подгружаются элементы(в блоке всегда присутствует только три элемента из скольки угодного колическтва т.е. я их заменяю)
и есть скрол
на скрол и на блок повешены события 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);
},
