我可以禁用IE10历史滑动手势吗？ [英] Can I disable IE10 history swipe gesture?

问题描述

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

  -ms-scroll-snap-points-x：snapInterval（0px，1366px）; 
 -ms-scroll-snap-type：mandatory; 
 

我的应用程序有一个300％宽的子容器，导致3页的页面边界。 p>



这对于高性能分页滚动非常有效，除非用户在第一页，并且他们向右滑动，激活浏览器的内置后退手势，退出

我可以通过以下方式禁用后退手势：

  -ms-touch-action：none; 
  

但是这也会禁用触摸滚动，因此页面不再可拖动。如果我使用：

  -ms-touch-action：pan-x; 
  

然后滚动重新工作，但浏览器后退手势重新出现，这是一个非常恼人的用户体验。有没有办法允许平移而不是历史手势？

解决方案

解决方案很简单，你只需要添加一个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; 
} 
  
 
I have a surface web app that uses touch panning (container divs have "overflow: auto" style) and I'm using the built-in paging scroll styles:
-ms-scroll-snap-points-x: snapInterval(0px, 1366px);
-ms-scroll-snap-type: mandatory;
My app has a 300% width child container resulting in 3 pages that snap on page boundaries.

This works great for high-performance paging scrolling, except when the user is on the first page and they swipe to the right, which activates the browser's built-in back gesture, exiting my web app and going into the user's IE10 history.

I'm able to disable the back gesture using:
-ms-touch-action: none;
But that also disables touch scrolling so the page is no longer draggable. If I use:
-ms-touch-action: pan-x;
Then the scrolling works again but the browser back gesture reappears which is a really annoying user experience. Is there a way to allow panning but not the history gesture?
解决方案
The solution is simple, you just need to add a CSS style that prevents scroll behavior from bubbling up from child elements that have reached their scroll limit, to parent elements (where the scroll eventually turns into a top-level history navigation).

The docs (http://msdn.microsoft.com/en-us/library/windows/apps/hh466007.aspx) state that the default is:
-ms-scroll-chaining: none;
However the default appears to really be:
-ms-scroll-chaining: chained;
I set that style to none by default and chained on the elements in my carousel that really should be chained, which disabled history navigation gestures in my app:
* {
    -ms-scroll-chaining: none;
}

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


                        
这篇关于我可以禁用IE10历史滑动手势吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！