0

我有一些内容作为较大布局的一部分溢出，通常比页面宽。溢出的内容被其中一个容器剪切，这很好，除了在 IE9 中单击剪切容器并使用基于鼠标的水平滚动（想想触摸板、超导航、强大的鼠标）会导致容器中的所有内容滚动直到剪辑内容的边缘可见。我需要防止这种行为，同时仍然允许那些鼠标滚动外部容器。在我看来，在该元素上捕获滚动事件并将它们传递给其父元素会很好，但我还没有弄清楚如何让 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;
}
4

1 回答 1

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 标签）。

为了将来的参考， Dottoro Web Reference是查找 DOM 元素、事件和其他 DOM 架构以及兼容性的绝佳网站。

请注意，滚动事件是不可取消的，请参见此处；但是，鼠标滚轮事件是......所以在这里

于 2013-02-17T21:22:48.923 回答