Question

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

更新：一些探测揭示了以下内容：由于不同的HID以不同的方式发送滚动事件（我正在看你的突触），唯一会被触发的事件是滚动事件。滚动事件没有冒泡阶段，无法取消。此外，简单地将滚动设置为0作为滚动处理程序的一部分的结果很差。这有效地排除了所有适用于大多数设备的javascript解决方案，这些设备能够生成输入以横向滚动。我的下一个攻击过程是通过点击事件。点击确实会冒泡，并且为了发生意外行为，必须首先点击有问题的溢出：隐藏div。如果我可以防止焦点，那么它永远不会成为滚动事件的目标。真正的诀窍是让链接继续发挥作用。

证明这个问题的小提琴是 http://jsfiddle.net/conartist6/tnmT3/6/

HTML：

<div class="outer"><div class="ctnr"><div>Click in here and scroll r/l with wheel or midclick+drag. IE9 moves content, Chrome/FF do not.<div>The quick brown fox jumped over the lazy dog</div></div></div>
    <div style="width: 700px;">This should still scroll normally blah blah blah blah blah blah blah blah blah lajsof ijwjlk jdslf kjojfoj jjslfj sljfoi jdfoiaj ;lsajoi fejogro lfffos joidjgoe wqqqq</div></div>

CSS：

.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;
}

Answer 1

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

*使用您不希望滚动的容器的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架构以及兼容性的优秀网站是the Dottoro Web Reference。

您知道，滚动事件无法取消，请参阅here;但是，mousewheel事件是......所以here

如何阻止IE滚动隐藏溢出的内容

1 个答案:

如何阻止IE滚动*隐藏*溢出的内容

1 个答案:

如何阻止IE滚动隐藏溢出的内容