Добрый день.
Добавил на главной блок с горизонтальным скролом.
Ничего особенного, просто повернул один див через 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
Заранее благодарен за подсказку.