Могу ли я отключить жестов в истории IE10?

Ответ 1

Решение простое, вам просто нужно добавить стиль CSS, который предотвращает появление поведения прокрутки от дочерних элементов, достигших предела прокрутки, родительским элементам (где свиток в конечном итоге превращается в навигацию по истории верхнего уровня).

В документах (http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx) указано, что значение по умолчанию:

-ms-scroll-chaining: none;

Однако по умолчанию это действительно так:

-ms-scroll-chaining: chained;

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

* {
    -ms-scroll-chaining: none;
}

.carousel * {
    -ms-scroll-chaining: chained;
}

Ответ 2

Вам нужно установить -ms-touch-action: none; для всех элементов.

Вместо этого они будут запускать события для ваших обработчиков JavaScript (если они есть), но предотвратят ВСЕ новые действия, включая: панорамирование, масштабирование и скользящее. Это лучше всего, если вы хотите настроить пользовательский интерфейс, как ваше приложение использует touch.

Ответ 3

Не идеальное или изящное решение, но можете ли вы использовать прослушиватели событий MSPointerDown, MSPointerMove и MSPointerUp для обнаружения салфетки и предупрежденияDefault?

// Touch events
target.addEventListener('MSPointerDown', callback);
target.addEventListener('MSPointerMove', callback);
target.addEventListener('MSPointerUp', callback);

Ответ 4

Изменить. Следующая не позволяет предотвратить прокрутку, вызывающую навигацию на Windows Phone 8.1, хотя она предотвращает навигацию по навигации для меня на планшете Windows 8.1. Оставляя ответ здесь, поскольку он может быть частично полезен кому-то.

Если ваша страница больше, чем область просмотра (нажмите, чтобы панорамировать), то работает следующий CSS (отредактируйте: только на планшете 8.1):

html {
  -ms-scroll-chaining: none;
}

Если ваша страница меньше, чем область просмотра (т.е. страница не прокручивается/подкачки, например, уменьшена), то вышеуказанное не работает.

Однако код, похожий на следующие работы (редактирование: только на 8.1 таблетке) для меня:

CSS

html.disable-ie-back-swipe {
    overflow: scroll;
    -ms-scroll-chaining: none;
}

JavaScript:

if (navigator.msMaxTouchPoints) {
    if (/Windows Phone/.test(navigator.userAgent)) {
        document.documentElement.classList.add('disable-ie-back-swipe');
    } else {
        try {
            var metroTestElement = document.createElement('div');
            metroTestElement.style.cssText = 'position:absolute;z-index:-1;top:0;right:0;bottom:-10px;width:1px';
            document.body.appendChild(metroTestElement);
            if (Math.round(window.outerWidth - metroTestElement.offsetLeft) === 1) {
                document.documentElement.classList.add('disable-ie-back-swipe');
            }
            document.body.removeChild(metroTestElement);
        } catch (e) {   // window.outerWidth throws error if in IE showModalDialog
        }
    }
}

Примечания по JavaScript:

• Тестирование navigator.msMaxTouchPoints проверяет, что это IE10/IE11 и что устройство использует touch.
• Изменить: обнаруживает Windows Phone и устанавливает disable-ie-back-swipe, однако CSS фактически не отключает эту функцию на Windows Phone 8.1 ARRRGH.
• Тесты metroTestElement для современных (современные не имеют полос прокрутки, поэтому правый - 1 пиксель, тогда как на рабочем столе есть полосы прокрутки, поэтому их ширина составляет 18 пикселей или около того в зависимости от ширины полосы прокрутки).
• Этот код отключает только обратный щелчок, если используется IE11 и современный.
• Кажется, что для правил CSS можно использовать либо html, либо body, и я не уверен, что на самом деле лучше (IMHO я обычно думаю о теле как странице, а не прокручиваемом, а html - в окне просмотра/окне, но фактически зависит от деталей реализации IE).

Редактировать 2: Эта функция IE называется "переворачиваться". Корпорация может отключить его с помощью групповой политики - см. http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10

Ответ 5

В проекте я работал над нужным именно этим, но вам нужно было прокручивать в определенных областях (а не просто прокрутку, но переполнение). Кажется, что следующее работает, протестировано на IE11 (Metro) Surface 2 и IE11 WinPhone на Lumia 930. Также с сенсорной мышью, которая также выполняет горизонтальную прокрутку.

Пожалуйста, ознакомьтесь с этой демонстрацией здесь: http://jsbin.com/fediha/1/edit?html,css,output

Трюк, чтобы отключить историю назад/вперед), кажется, отключает "pan-x" для любого элемента, кроме тех, которые вы хотите прокручивать по горизонтали. Выдержка из CSS:

    * {
      /* disallow pan-x! */
      touch-action: pan-y pinch-zoom double-tap-zoom;
      /* maybe add cross-slide-x cross-slide-y? */
    }
    .scroller-x,
    .scroller-x * {
      /* horizontal scrolling only */
      touch-action: pan-x;
    }
    .scroller-y,
    .scroller-y * {
      /* vertical scrolling only */
      touch-action: pan-y;
    }

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

touch-action только IE11, в IE10 вам понадобится -ms-touch-action, но IE10 больше не используется, и у меня нет тестового устройства.