我可以禁用IE10歷史刷卡手勢嗎？

Question

我有一個使用觸摸平移（div容器具有「溢出：汽車」的風格）的表面網絡應用和我使用的是內置分頁滾動風格：

-ms-scroll-snap-points-x: snapInterval(0px, 1366px); 
-ms-scroll-snap-type: mandatory; 

我的應用程序有一個300％的寬度子容器導致3個頁面捕捉頁面邊界。

這對於高性能分頁滾動非常適用，除非用戶在第一頁上並向右滑動，從而激活瀏覽器的內置後退手勢，退出我的Web應用程序並進入用戶的IE10歷史。

我能夠禁止使用回退姿勢：

-ms-touch-action: none; 

但也禁用觸摸滾動所以頁面不再拖動。如果我使用：

-ms-touch-action: pan-x; 

然後滾動再次工作，但瀏覽器的回退姿勢重新出現這是一個非常惱人的用戶體驗。有沒有辦法讓平移而不是歷史手勢？

Answer 1

解決方法很簡單，你只需要添加，以禁止從已達到其極限滾動子元素，父元素冒泡（滾動行爲的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; 
} 

Answer 2

不是一個理想的或優雅的解決方案，但可以使用MSPointerDown,MSPointerMove和MSPointerUp事件偵聽器來檢測滑動和preventDefault？

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

Answer 3

您需要在所有元素上設置-ms-touch-action: none;。

這會將事件引發到JavaScript處理程序（如果有的話），但會阻止所有新操作，包括：平移，縮放和滑動。如果您想量身定製您的應用如何利用觸控，這是最好的選擇。

Answer 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並且設備使用觸摸。
• 編輯：檢測Windows Phone並設置禁用，即後刷，但CSS實際上並沒有禁用Windows Phone 8.1 ARRRGH上的功能。
• 現代的metroTestElement測試（現代沒有滾動條，所以正確的是1像素，而桌面有滾動條，所以正確的取決於滾動條寬度是18像素左右）。
• 如果使用IE11和modern，代碼僅禁用後滑動。
• 看來，無論是HTML或正文可以用於CSS規則，我不確定哪個實際上更好（恕我直言，我通常認爲身體作爲頁面，而不是可滾動，和HTML作爲視口/窗口，但實際上取決於IE的實現細節）。

編輯2：此IE功能稱爲「向前翻」。企業可能能夠使用組策略來禁用它 - 請參閱http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10

Answer 5

在我正在研究的項目中，需要完全按需執行此操作，但需要在某些區域進行滾動（不僅僅是一般滾動，而是溢出）。似乎以下工作，在Lumia 930上的IE11（Metro）Surface 2和IE11 WinPhone上測試過。此外，還使用水平滾動的觸摸鼠標。

請參閱本演示在這裏：http://jsbin.com/fediha/1/edit?html,css,output

訣竅禁用歷史前進/後退）似乎是禁用「泛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不再使用那麼多，我沒有測試設備。