Html 如何停止IE滚动*隐藏*溢出内容

我有一些内容作为更大布局的一部分溢出，通常比页面宽。溢出的内容由它的一个容器进行剪切，这很好，除了在IE9中单击剪切容器并使用基于鼠标的水平滚动（想想touchpad、ultranav、mighty mouse）会导致容器中的所有内容滚动，直到剪切内容的边缘可见。我需要防止这种行为，同时仍然允许鼠标滚动外部容器。在我看来，捕获该元素上的滚动事件并将其传递给其父元素是很好的，但我还没有弄清楚如何让jQuery做到这一点。如果有人能想到一个非JS的解决方案，那也太酷了

更新： 一些探索揭示了以下几点：由于不同的HID发送滚动事件的方式不同（我看的是synaptic），因此始终触发的唯一事件是滚动事件。滚动事件没有冒泡阶段，无法取消。此外，作为滚动处理程序的一部分，简单地将滚动设置为0的结果很差。这有效地排除了所有适用于大多数能够生成横向滚动输入的设备的javascript解决方案。我的下一个攻击过程是通过点击事件。单击do bubble，要发生不希望发生的行为，必须首先单击有问题的overflow:hidden div。如果我可以阻止聚焦，那么它将永远不会成为滚动事件的目标。真正的诀窍是让链接继续工作

一把小提琴演示了这个问题

HTML:

---

如果我理解正确，这应该是您要寻找的答案：

*使用您不希望滚动的容器的id

//Firefox uses a different event that is **not cancelable** for mousewheel, of course there is a work around
//Since you only need IE though, here it is:
$('#divID').on('mousewheel', function(event) { //for all browsers except Firefox
  event.preventDefault();
});

注意：我使用一个触摸板，所以我无法测试它，但我非常确定它会工作，只要确保只针对要阻止默认操作的div（使用id标记）

作为将来的参考，下面是一个查找DOM元素、事件和其他DOM体系结构以及兼容性的好网站

---

正如您所知，滚动事件是不可取消的，请参阅；但是，鼠标滚轮事件是。。。因此，我看到一个镀铬的水平滚动条。不理解问题。这只是为了让任何测试解决方案的人都能确保它不会破坏其他东西。如前所述，您需要IE9和一个可以水平滚动的输入设备，以便正确地遵循说明并查看错误。这是我的第一个想法。我测试了它，但它不起作用。如果启用了edge或双指滚动功能，您可以在触摸板上看到该解决方案的效果。不过我想你对鼠标轮事件有所了解。这是在该元素上生成滚动的唯一方法，因此我几乎可以肯定，在那里取消它将防止意外滚动。然后，我需要弄清楚的是如何在容器的父容器上触发实际应该滚动的相同事件（包括原始事件数据）。不，不要使用滚动事件，这是不可取消的。使用我定义的鼠标滚轮。我将更改您的JSFIDLE，然后请重试。我更改了您的JSFIDLE。。。哦，我明白你的意思了。您希望禁用内部div上的滚动，但当用户使用内部div上的滚动时，包含该滚动的父div将被滚动。那是准确的描述吗？是的。我正在玩鼠标轮事件，到目前为止我还没能捕捉到一个。我在处理程序中插入了一个警报，即使我把它放在外部滚动容器中，它也不会发出警报，因为它绝对没有什么可怕的事情发生。

.outer
{
    width: 500px;
    overflow-x: scroll;
}
.ctnr{
    width: 300px;
    background-color: violet;
    overflow: hidden;
}
.ctnr > div
{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightsteelblue;
}

.ctnr>div>div
{
    position: absolute;
    left:0;
    bottom: 0;
    width:400px;
    background-color: salmon;
    overflow: hidden;
}

//Firefox uses a different event that is **not cancelable** for mousewheel, of course there is a work around
//Since you only need IE though, here it is:
$('#divID').on('mousewheel', function(event) { //for all browsers except Firefox
  event.preventDefault();
});