Отключить прокрутку при касании движением определенного элемента

У меня есть страница с разделом для рисования чертежа. Но события touchmove, по крайней мере, вертикальные, также прокручивают страницу (что ухудшает работу эскизов) при использовании ее в мобильном браузере. Есть ли способ: a) отключить и снова включить прокрутку страницы (чтобы я мог отключить ее, когда каждая строка запущена, а затем верните ее после завершения каждого) или b) отключите обработку по умолчанию (и, предположительно, прокрутку), которые идут на холст, нарисованный эскизом (я не могу просто полностью отключить их, поскольку их использует эскиз)?

Я использовал jquery-mobile vmouse обработчики для эскиза, если это имеет значение.

Обновить. На iPhone, если я выберем холст, который нужно нарисовать, или просто держите палец немного перед рисованием, страница не прокручивается, а не из-за чего-либо. закодированный на странице.

Ответы

Ответ 2

Задайте свойство touch-action CSS none, которое работает даже с прослушиватели пассивных событий:

touch-action: none;

Применение этого свойства к элементу не приведет к возникновению поведения по умолчанию (прокрутки), когда событие происходит из этого элемента.

Ответ 3

Примечание. Как указано в комментариях @nevf, это решение может больше не работать (по крайней мере, в Chrome) из-за изменений производительности. Рекомендуется использовать touch-action которое также предлагает ответ @JohnWeisz.

Подобно ответу @Llepwryd, я использовал комбинацию ontouchstart и ontouchmove чтобы предотвратить прокрутку, когда он находится на определенном элементе.

Взятые как есть из проекта моего:

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
    if ($(e.target).closest('#mobileMenuHeader').length == 1)
    {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function()
{
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
    if (blockMenuHeaderScroll)
    {
        e.preventDefault();
    }
});

По сути, то, что я делаю, это слушание касания начала, чтобы увидеть, начинается ли оно на элементе, который является дочерним по отношению к другому, используя jQuery .closest и позволяя этому включать/выключать движение касания с помощью прокрутки. e.target относится к элементу, с которого начинается сенсорный запуск.

Вы хотите запретить настройку по умолчанию для события сенсорного перемещения, однако вам также необходимо сбросить свой флаг для этого в конце сенсорного события, иначе никакие события сенсорной прокрутки не будут работать.

Это может быть выполнено без jQuery, однако для моего использования у меня уже был jQuery, и мне не нужно было что-то кодировать, чтобы определить, имеет ли элемент определенный родительский элемент.

Протестировано в Chrome на Android и iPod Touch по состоянию на 2013-06-18

Ответ 4

В CSS есть немного "взлома", что также позволяет отключить прокрутку:

.lock-screen {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

Добавление этого тела в тело предотвратит прокрутку.

Ответ 5

document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);

Это должно предотвратить прокрутку, но оно также нарушит другие события касания, если вы не определите собственный способ их обработки.

Ответ 6

попробуйте переполнение скрытой вещи, которую вы не хотите прокручивать, когда происходит событие touch. например, установите переполнение, скрытое в Start, и верните его в автоматическое завершение.

Вы попробовали? Мне было бы интересно узнать, будет ли это работать.

document.addEventListener('ontouchstart', function(e) {
    document.body.style.overflow = "hidden";
}, false);

document.addEventListener('ontouchmove', function(e) {
    document.body.style.overflow = "auto";
}, false);

Ответ 7

Конечным решением будет установка overflow: hidden; на document.documentElement следующим образом:

/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
    document.documentElement.style.overflow = 'hidden';
});

document.addEventListener('touchend', function(e) {
    document.documentElement.style.overflow = 'auto';
});

Установив overflow: hidden в начале касания, он делает все, что превышает скрытое окно, тем самым устраняя доступность, чтобы прокручивать что-либо (нет содержимого для прокрутки).

После touchend блокировку можно освободить, установив overflow в auto (значение по умолчанию).

Лучше добавить это к <html>, потому что <body> может использоваться для создания стиля, плюс он может заставить детей вести себя неожиданно.

EDIT: О touch-action: none; - Safari не поддерживает его в соответствии с MDN.

Ответ 8

Я обнаружил, что ev.stopPropagation(); работал на меня.