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的

属性看起来可能会解决您的问题 - 尽管我自己无法对其进行测试。

Answer 2

过度滚动跳出效果不仅限于Internet Explorer 11，甚至可以在简单的应用程序中看到，例如记事本。

要禁用此效果，请将以下注册表项设置为“0”：

HKEY_CURRENT_USER\Software\Microsoft\Wisp\Touch\Bouncing

Answer 3

问题可以通过css3中的自动换行属性来解决。我还添加了一个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

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

Answer 4

抱歉，我们应该在发布回答之前进行测试。

我测试了jsbin问题并解决了这个问题。将这些样式分配给scrollie类：

.scrollie {
  max-height: 200px;
  width: 300px;
  overflow-y:scroll;
  word-wrap:break-word;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Answer 5

我相信我通过在CSS中添加以下内容来修复它：

body {
    overflow: hidden;
}

您可以在this updated jsBin

看到结果

Answer 6

尝试使用：

.scrollable {
  overflow: auto;
  zoom: 1;
}

或

.scrollable {
  overflow: hidden;
  zoom: 1;
}

防止Internet Explorer 11中的过度滚动

6 个答案: