Как сделать скролл по шагу?

Question

[Andrey Dyrkov]

Необходимо реализовать линейку контента. На картинке представлен 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?)

Answer 1

[Penelopus]

Как вариант, отлавливать действие скролла, после чего прекращать его и докручивать самостоятельно до нужной отметки. Сработает и при контенте 2064

Answer 2

[wildsnail]

Вот библиотека позволяет ловить событие именно начало нового склоллинга мышью. Т.е. если ты ее подключишь, ты можешь пересчитывать значения линейки не на событие scroll, а на колбек библиотеки (смотри пример)