19

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

-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;

然后滚动再次起作用，但浏览器返回手势再次出现，这是一个非常烦人的用户体验。有没有办法允许平移但不允许历史手势？

4

5 回答 5

11

解决方案很简单，您只需要添加一个 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;
}
于 2012-12-04T18:06:10.670 回答
8

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

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

于 2012-12-21T16:52:28.143 回答
0

编辑：以下内容不能阻止在 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 和现代，该代码仅禁用向后滑动。
  • 似乎 html 或 body 都可以用于 CSS 规则，我不确定哪个实际上更好（恕我直言，我通常认为 body 是页面而不是可滚动的，而 html 是视口/窗口，但实际上取决于IE 实现细节）。

编辑 2：此 IE 功能称为“向前翻转”。企业可以使用组策略禁用它 - 请参阅http://www.thewindowsclub.com/enable-disable-flip-feature-internet-explorer-10

于 2015-01-14T04:17:56.163 回答
0

不是一个理想或优雅的解决方案，但您可以使用MSPointerDown,MSPointerMove和MSPointerUp事件侦听器来检测滑动和 preventDefault 吗？

// Touch events
target.addEventListener('MSPointerDown', callback);
target.addEventListener('MSPointerMove', callback);
target.addEventListener('MSPointerUp', callback);
于 2012-12-01T00:53:19.863 回答
0

在我正在从事的一个项目中，正是需要这个，但需要在某些区域滚动（不仅仅是一般滚动，而是溢出）。似乎以下确实有效，在 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 不再使用那么多，而且我没有测试设备。

于 2015-04-18T15:47:20.113 回答