Необходимо реализовать линейку контента. На картинке представлен iframe с подгруженным контентом. Необходимо реализовать линейку, я думаю лучшем способом будет просто пересчитывать значения на линейке, для этого я использую событие onscroll.
Вот код js
var frame = document.getElementById('frame').contentWindow,
oldscolled = 0,
metrica = document.getElementById('mtrc'),
left=metrica.getElementsByClassName('left')[0].getElementsByTagName('p'),
top=metrica.getElementsByClassName('top')[0].getElementsByTagName('p');
frame.addEventListener('scroll',function(){
var scrolled =frame.scrollY;
if(oldscolled>scrolled){
//поднимаемся
for(var i = 0 , l = left.length; i < l ; i++){
var cache1 = left[i].innerHTML;
console.log(cache1);
left[i].innerHTML = Number(cache1) - 100;
}
}else{
//опускаемся
for(var k = 0 , lk = left.length; k < lk ; k++){
var cache2 = left[k].innerHTML;
console.log(cache2);
left[k].innerHTML = Number(cache2) + 100;
}
}
oldscolled = scrolled;
},false);
Вся нормально работает,но при двух условиях наступает ахтунг.
Это работает если скролл осуществляется по 100 px, но пользователь волен скролить по сколько угодно и изза этого возникает не точность.
Если доскролить до конца контента и скролл будет не кратный 100 (например 2064), то опятьже идёт огромная неточность.
Как лучше реализовать данный функционал? Как сделать скролл по определённому шагу?( что делать когда скролл будет доходить до 2000 напрмер а размер контента будет 2064?)
