防止 Internet Explorer 11 中的过度滚动

Posted 2023-03-06

【中文标题】防止 Internet Explorer 11 中的过度滚动

【英文标题】：Preventing overscroll in Internet Explorer 11

【发布时间】：2014-06-23 13:16:47

【问题描述】：

我有一个网站上有一个<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 中防止过度滚动的正确方法是什么。

【问题讨论】：

最近 overscroll-behavior 被添加到 Firefox 59 和 Chrome 65 并将添加到 Edge 18。

【参考方案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/cs-s-ref/css3_pr_word-wrap.asp

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

【讨论】：

这在我发布的 JSBin 示例和实际站点中都没有解决。

@MPD 看到我的新答案。

【参考方案2】：

抱歉应该在发布答案之前进行测试。

我测试了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;

【讨论】：

那行不通。当您尝试滚动到极限时，整个窗口仍然会移动。此外，您可以只编辑原始答案。无需发布新的。

它确实在 JS Bin 中解决了它，但是，是的，我不是 100% 确定它会在 iE 中工作

【参考方案3】：

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

body 
    overflow: hidden;

您可以在this updated jsBin查看结果

【讨论】：

窗口仍然过度滚动/反弹。

【参考方案4】：

尝试使用：

.scrollable 
  overflow: auto;
  zoom: 1;

或

.scrollable 
  overflow: hidden;
  zoom: 1;

【讨论】：

窗口仍然过度滚动/弹跳。

【参考方案5】：

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

要不然看看

-ms-scroll-chaining: none;

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

【讨论】：

如果这确实解决了问题，请及时通知我们，因为我之前没有遇到过这个问题 - 注意自己，攒钱买触摸屏 win7 盒子；)

通过在 google 上搜索“在 ie11 touch 上滚动反弹”找到的仅供参考的链接

这并不能防止过度滚动/反弹。提供的 MSDN 链接还提到这仅适用于 Windows 8 及更高版本。

"这是一个特定于 IE 的解决方法，并在根滚动器上禁用滚动链接 (--ms-scroll-chaining: none)。这实际上在实践中效果不佳，因为它只会阻止过度滚动操作，如果页面没有完全滚动到它的范围内，需要页面是可滚动的”——来自discourse.wicg.io/t/…

【参考方案6】：

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

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

HKEY_CURRENT_USER\Software\Microsoft\Wisp\Touch\Bouncing