1

Как распознать вертикальное направление движение касания пальца вверх или вниз на мобильных устройствах при прокрутке страницы с помощью javascript(Jquery)? Методы на базе событий scroll,к сожалению, работают некорректно при скрытии и показа блоков. Нужен метод на базе touch. нижеприведенный код работает лишь отчасти почему-то при втором касании к экрану:

$(window).on('touchstart', function(e){
    var touchobj = e.changedTouches[0]; // первая точка прикосновения
    starty = parseInt(touchobj.clientY); // положение точки касания по y, относительно левого края браузера
    e.preventDefault();
            $(window).on('touchmove', function(event){
            var touchobj = event.changedTouches[0]; // первая точка прикосновения для данного события
            var dist = parseInt(touchobj.clientY) - starty;
            if(dist>0){
                        jQuery('#btn_mobile').css('opacity', '1');
                        jQuery('#btn_mobile').css('z-index', '9999');
                    }
                    else{
                        jQuery('#btn_mobile').css('opacity', '0');
                        jQuery('#btn_mobile').css('z-index', '0');
                    }
            e.preventDefault();
        }, false);
}, false);
1

1 ответ 1

3
  • на touchstart устанавливаем переменную в true
  • на touchmove, ЕСЛИ переменяя true, делаем все что нужно
  • на touchend устанавливаем переменную в false

Для определения направления, в touchstart сохраняем координаты начала движения, а в touchmove вычисляем уже относительно них

let event = null;

document.addEventListener("touchstart", function (e) {
    event = e;
});
document.addEventListener("touchmove", function (e) {
    if (event) {
        console.log("Move delta: " + (e.touches[0].pageY - event.touches[0].pageY))
    }
});
document.addEventListener("touched", function (e) {
    event = null;
});

Вот аналог для mousemove, просто чтобы могли посмотреть прямо здесь):

var event = null;

document.addEventListener("mousedown", function (e) {
    event = e;
});
document.addEventListener("mousemove", function (e) {
    if (event) {
        console.log("Move delta: " + (e.screenY - event.screenY))
    }
});
document.addEventListener("mouseup", function (e) {
    event = null;
});

4
  • 1
    Переменная не будет видна вне функции touchstart и потом мне нужно направление определить 1 ноя 2018 в 4:38
  • Если переменную объявить в глобальном пространстве, все будет видно @artur-han 1 ноя 2018 в 11:55
  • А направление все равно не определить вашим способом 1 ноя 2018 в 13:56
  • Обновил ответ. Именно таким способом я сам определяю направление и степень смещения 1 ноя 2018 в 14:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.