Question

我有一个使用触摸平移的表面Web应用程序（容器div具有“overflow：auto”样式），我正在使用内置的分页滚动样式：

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

我的应用有300％宽度的子容器，导致3页在页面边界上捕捉。

这适用于高性能分页滚动，除非用户在第一页上并向右滑动，这会激活浏览器的内置后退手势，退出我的网络应用程序并进入用户的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;

我默认情况下将该样式设置为无，并链接到我的旋转木马中真正应该链接的元素，这会禁用我的应用中的历史导航手势：

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

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

Answer 2

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

这将触发事件到JavaScript处理程序（如果有），但会阻止所有新操作，包括：平移，缩放和滑动。如果您想自定义应用程序如何利用触摸，这是最好的。

Answer 3

不是理想或优雅的解决方案，但是您可以使用MSPointerDown，MSPointerMove和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功能被称为＆＃34;向前翻转＆＃34;。公司可以使用组策略禁用它 - 请参阅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不再使用那么多，我没有测试设备。

我可以禁用IE10历史记录滑动手势吗？

5 个答案: