По сути, на моем веб-сайте есть главный раздел, внизу которого есть кнопка. Кнопка позволяет пользователю автоматически прокручивать мимо героя к следующему элементу.
Проблема: если пользователь прерывает анимацию прокруткой, в следующий раз, когда он нажмет кнопку, появится анимация прокрутки. застревает – или иногда прокручивает только на 10–50 пикселей вместо полных 100 пикселей.
HTML
JS
//Hero Arrow Scroll Button
var isScrolling = false;
let B1 = $(".B1");
$(document).on('click', '#js-hero-arrow', function() {
if (isScrolling === false) {
isScrolling = true;
scrollToElementTop(B1).then(() => {
isScrolling = false;
});
}
});
//Function to add a callback to the scroll element top
function scrollToElementTop (elem) {
const targetPosition = (elem.offset().top + elem.outerHeight(true));
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
return new Promise(resolve => {
const scrollHandler = () => {
if (window.scrollY === targetPosition) {
window.removeEventListener('scroll', scrollHandler)
resolve();
}
}
window.addEventListener('scroll', scrollHandler)
});
}
^ Функция «scrollToElementTop» не моя. Я нашел его в stackoverflow и надеялся, что добавление обратного вызова и isScrolling решит мою проблему, но этого не произошло.
Вопросы
Почему это происходит и что я могу сделать, чтобы это исправить?
РЕДАКТИРОВАТЬ:
Без взлома это выглядело так:
//Hero Arrow Scroll Button
let B1 = $(".B1");
$(document).on('click', '#js-hero-arrow', function() {
const targetPosition = B1.offset().top + B1.outerHeight(true);
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
});
Подробнее здесь: https://stackoverflow.com/questions/784 ... -sometimes
