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,MSPointerMoveMSPointerUp事件侦听器来检测滑动和 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 回答