serii81
@serii81
Я люблю phр...

Почему не всегда срабатывает горизонтальный скролл блока на страницы?

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

Почему?

И еще, я сделал, что при скролле, когда до блока остается 200px, то браузер автоматически центрирует этот блок.

Вот код
let horizontalScroll = function () {
		if ($(window).width() > 992) {

			function chk_scroll(e) {
				let elem = $(e.currentTarget);

				if (Math.round(elem[0].scrollHeight - elem.scrollTop()) === elem.outerHeight()) {
					return true;
				}

			}

			let windowHeight = $(window).height();

			let productsBlockFirst = $('#js-products-block-first');
			let productsBlockMainHeader = $('#js-products-block-first .products-block__main-header');
			let productsBlockFirstHeight = productsBlockFirst.innerHeight() - productsBlockMainHeader.innerHeight();
			let productsBlockFirstOffsetTop = productsBlockFirst.offset().top + productsBlockMainHeader.innerHeight();

			$('.products-block').each(function () {
				let productsBlockOutWrapper = $(this).find('.products-block__outer-wrapper');
				let productsBlockOutWrapperOffsetTop = productsBlockOutWrapper.offset().top;
				let productsBlockOutWrapperScrollTop = productsBlockOutWrapper.scrollTop();
				let productsBlockOutWrapperHeight = productsBlockOutWrapper.innerHeight();
				let productsBlockOutWrapperOffsetBottom = productsBlockOutWrapperOffsetTop + productsBlockOutWrapperHeight;
				let productsBlockOutWrapperScrollHeight = document.getElementsByClassName('products-block__outer-wrapper')[0].scrollHeight;
				let productsBlockWrapperHeight = $('.products-block__wrapper').innerHeight();


				let scrollCenter = productsBlockFirstOffsetTop - ((windowHeight - productsBlockFirstHeight) / 2);

				let iScrollPos = 0;

				let flag = false;

				productsBlockOutWrapper.scroll(function (e) {
					let currentScroll = $(this).scrollTop();


					if (flag === false) {
						$('html, body').animate({
							scrollTop: scrollCenter
						});
						flag = true;
					}

					if (currentScroll === 0) {
						$('html, body').animate({
							scrollTop: productsBlockOutWrapperOffsetTop - 900
						});
						flag = false;
					} else if (currentScroll > iScrollPos) {
						if (chk_scroll(e)) {
							$('html, body').animate({
								scrollTop: productsBlockOutWrapperOffsetTop + 800
							});

							flag = false;
						}
					}

					iScrollPos = currentScroll;
				});
			});
		}

	}
	horizontalScroll();


Ссылка на страницу ideagelato.cf

Заранее благодарен за подсказку.
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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