@ASiD

Как прекратить прокрутку страницы при достижении элемента?

Здравствуйте. Есть задача:
Страница высотой в несколько экранов. Где-то в середине нужно сделать слайдшоу таким образом, чтобы когда посетитель доскроллил до этого элемента, вертикальный скроллинг прекращался и при попытке скроллинга листались слайды. Когда слайды заканчиваются, вертикальный скроллинг снова включается.

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

<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
	$( function() {
	var scrt;
	scrt=$(window).scrollTop();
	
	$(window).scroll(function(){
	
		$(window).scroll(100);
		if ($(window).scrollTop()-$('#slides').offset().top>-300){

		if (scrt<$(window).scrollTop()){
				$('#slides').css({ left: '-=10px' });		
			} else {
				$('#slides').css({ left: '+=10px' });
			};
			scrt=$(window).scrollTop();
		}else{
		
		};
	});
	});
</script>
</head>
<body>
<div style="" id="big">
	<div style="height: 500px;"></div>
	<div id="slides" style="width: 3396px;
    position: relative;">
		<img src="/img/1.png">
		<img src="/img/2.png">
		<img src="/img/3.png">
		<img src="/img/4.png">
		<img src="/img/5.png">
	</div>
	<div style="height: 1500px;"></div>
</div>
</body>
</html>


Подскажите, как можно решить проблему или готовый плагин, который делает подобное слайдшоу?
  • Вопрос задан
  • 4318 просмотров
Пригласить эксперта
Ответы на вопрос 2
lazalu68
@lazalu68
Salmon
TLDR - набросок

Суть проста: когда документ доскроллен до котиков, проверяем доскроллены ли котики до возможного конца, и если нет, то устанавливаем нужное значение вертикального скролла документа, в данном случае это такой вертикальный скролл, чтоб котики были в середине. По ходу еще скроллим горизонтально котиков.

Все.
Ответ написан
Вы не можете предотвратить прокрутку внутри onscroll, так как этот обработчик вызывается уже после самой прокрутки, а не до. Единственный вариант это блокировать события, которые приводят к прокрутке: события колёсика мыши, мультитача и некоторых клавиш. С конкретной реализацией поможет гугл.

P.S. Вы всё-равно не сможете блокировать прокрутку при перетягивании скролл-бара мышкой. Так что стоит пересмотреть подход к решению задачи.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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