VIKINGVyksa
@VIKINGVyksa
front-end developer

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

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

9e034626dedc4b7297850048fb1dacef.png

Вот код 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?)
  • Вопрос задан
  • 266 просмотров
Пригласить эксперта
Ответы на вопрос 2
@undefinedUser
Как вариант, отлавливать действие скролла, после чего прекращать его и докручивать самостоятельно до нужной отметки. Сработает и при контенте 2064
Ответ написан
@wildsnail
Вот библиотека позволяет ловить событие именно начало нового склоллинга мышью. Т.е. если ты ее подключишь, ты можешь пересчитывать значения линейки не на событие scroll, а на колбек библиотеки (смотри пример)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы