Можно ли отключить жест прокрутки истории IE10?

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

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

-ms-scroll-chaining: none;

Однако по умолчанию выглядит так:

-ms-scroll-chaining: chained;

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

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

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

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

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

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

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

Редактировать: Следующее не предотвращает предотвращение навигации, вызывающей смахивание на 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 и что устройство использует сенсорный ввод.
• Редактировать: обнаруживает Windows Phone и устанавливает отключение, т.е. обратное пролистывание, однако CSS фактически не отключает эту функцию в Windows Phone 8.1 ARRRGH.
• MetroTestElement тестирует для современных (у современных нет полос прокрутки, поэтому справа - 1 пиксель, тогда как у рабочего стола есть полосы прокрутки, поэтому справа - 18 пикселей или около того, в зависимости от ширины полосы прокрутки).
• Код отключает пролистывание назад только в том случае, если используется IE11 и современные версии.
• Кажется, что для правил CSS можно использовать либо html, либо тело, и я не уверен, что на самом деле лучше (ИМХО, я обычно думаю о теле как о странице, а не о прокрутке, а html как о окне просмотра/окне, но на самом деле зависит от детали реализации IE).

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

В проекте, над которым я работал, нужно было именно это, но нужно было прокручивать в определенных областях (не только общую прокрутку, но и переполнение). Похоже, следующее работает, проверено на 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 больше не используется, и у меня нет тестового устройства с ним.