javascript - 防止 Internet Explorer 11 中的过度滚动

Question

我有一个网站有<div>在它上面可以垂直滚动。这很好用。我也隐藏了滚动条，这也很好用。 CSS本质上是

.scrollable {
  overflow-y: scroll;
  -ms-overflow-style: none;
}

不过，我目前在 Internet Explorer 11 和 Windows 7 触摸屏上遇到了问题。当用户点击滚动条的顶部或底部时，窗口会反弹(即出现过度滚动)。虽然这对大多数用户来说只是一种烦恼，但这是在信息亭全屏运行，因此 overscoll 允许桌面窥视(不仅仅是浏览器背景)。

我一直未能找到解决方案。 touch-action (前缀和不)，例如

html, body, .scrollable {
  -ms-touch-action: none;
  touch-action: none;
}

似乎没有做任何事情，也没有

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('MSPointerMove', function (e) { e.preventDefault(); }, false);

This jsBin显示问题。

那么，在 IE11/Windows 7 中防止过度滚动的正确方法是什么。

Answer 1

跳出框框思考(看看我在那里做了什么)会给父元素 - body、section 甚至另一个 div 一个背景颜色缓解桌面显透的主要问题？

否则看看

-ms-scroll-chaining: none;

属性来自 http://msdn.microsoft.com/en-us/library/ie/hh772034(v=vs.85).aspx看起来它可能会解决您的问题 - 虽然我无法自己测试它。