Блог

Главная - Вопросы по программированию - scrollIntoView не выполняется в прослушивателе событий touch

scrollIntoView не выполняется в прослушивателе событий touch

#javascript #scroll #touch #slide

#javascript #прокрутка #коснитесь #слайд

Вопрос:

Я пытаюсь создать вертикальный слайд, он работает на рабочем столе с событием wheel, но метод scrollIntoView не выполняется в прослушивателе событий touch.

Вот код

 let startClientY, endClientY;
    page.addEventListener("touchstart", (event) => {
        startClientY = event.touches[0].pageY;
    }, false);

    page.addEventListener("touchmove", (event) => {
        endClientY = event.touches[0].pageY;
    }, false);

    page.addEventListener("touchend", (event) => {
        let diff = startClientY - endClientY;
        if (diff < -35) {
            if( i !== 0 ) {
                slides[i - 1].scrollIntoView({
                    behavior: "smooth", block: "start"
                });
                i--;
                console.log('scroll top'); // this code is executed as well
            }
        } else if (diff > 35) {
            if( i < slides.length -1) {
                slides[i   1].scrollIntoView({
                    behavior: "smooth", block: "start"
                });
                i  ;
                console.log('scroll down'); // this code is executed
            }
        }
        startClientY = undefined;
        endClientY = undefined;
    }, false);

Странный момент заключается в том, что журналы консоли внутри условий выполняются, а метод scrollIntoView работает вне EventListeners

Чего мне не хватает?

Комментарии:

1. Я сталкиваюсь с той же проблемой, мне не хватало того, что без event.preventDefault() в прослушивателе поведение не будет работать.

Ответ №1:

Проблема связана с параметром поведения scrollIntoView внутри прослушивателя событий touch, я нашел другой способ достичь того, чего я хочу.

 let slideHeight = page.offsetHeight;
page.addEventListener("touchstart", function (event) {
startClientY = event.touches[0].pageY;
}, {
    capture: true,
    passive: true
});

page.addEventListener("touchmove", function (event) {
    endClientY = event.touches[0].pageY;
}, {
    capture: true,
    passive: true
});

page.addEventListener("touchend", (event) => {
    let diff = startClientY - endClientY;
    if (diff < -35) {
        if (i !== 0) {
            page.scrollBy(0, -slideHeight);
            i--;
        }
    } else if (diff > 35) {
        if (i < slides.length - 1) {
            page.scrollBy(0, slideHeight);
            i  ;
        }
    }
    startClientY = undefined;
    endClientY = undefined;
}, {
    capture: true,
    passive: true
});

Где переменной страницы являются мои слайды
Надеюсь, это поможет!

Ответ №2:

добавьте touch-action: none; в ваш css

Ответ №3:

Использование event.preventDefault() не позволяет браузеру продолжать обрабатывать событие касания.

 page.addEventListener("touchstart", (event) => {
   event.preventDefault();
   ......
}, false);

ссылка:https://developer.mozilla.org/en-US/docs/Web/API/Touch_events