我可以禁用IE10歷史記錄滑動手勢嗎？

Question

我有一個使用觸摸平移的表面Web應用程序（容器div具有“overflow：auto”樣式），我使用內置的分頁滾動樣式：

-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

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

這將改為向JavaScript處理程序激活事件（如果有的話），但會阻止所有新操作，包括：平移，縮放和滑動。 如果您想自定義應用程序如何利用觸摸，這是最好的。

Answer 3

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

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

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並設置disable-ie-back-swipe但是CSS實際上並未禁用Windows Phone 8.1 ARRRGH上的功能。
• metroTestElement測試現代（現代沒有滾動條，所以右邊是1像素，而桌面有滾動條，所以右邊是18像素左右，取決於滾動條寬度）。
• 如果使用IE11和modern，則代碼僅禁用后滑動。
• 似乎html或body都可以用於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

禁用歷史后退/前進的技巧似乎是在除了你想要水平滾動的元素之外的任何元素上禁用“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不再使用那么多我沒有測試設備。