防止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);

这个jsBin显示了这个问题.

那么,什么是防止IE11/Windows 7过度滚动的正确方法.

Answer 1

这个问题可以通过css3中的word-wrap属性来解决。为了确定起见，我还添加了overflow-x:hidden。

.scrollable {
  overflow-y: scroll;
  -ms-overflow-style: none;
  word-wrap:break-word;
  overflow-x:hidden;
            }

您可以在这里阅读有关自动换行的更多信息 - http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

如果您不明白我的问题的任何部分，或者这没有解决您的问题，请发表评论并告诉我，以便我愿意回答更多问题。