如何停止滾動的IE瀏覽器*隱藏*溢出的內容

Question

我有一些內容溢出作爲更大的佈局，這通常比頁面更廣泛的一部分。溢出的內容被其中一個容器裁剪，這很好，除了在IE9中單擊裁剪容器並使用基於鼠標的水平滾動（認爲觸摸板，ultranav，mighty mouse）導致容器中的所有內容滾動，直到剪輯內容的邊緣是可見的。我需要防止這種行爲，同時仍然允許這些鼠標滾動外部容器。在我看來，像捕獲該元素上的滾動事件並導致它們被傳遞給它的父代會很好，但我還沒有想出如何讓jQuery來做到這一點。如果任何人都能想到非JS解決方案，那也會很酷。

更新： 一些探測揭示了以下內容：由於不同的HID發送滾動事件的方式不同（我在看你突觸），唯一會被觸發的事件是滾動事件。滾動事件沒有冒泡階段，不能被取消。此外，將滾動處理程序的一部分簡單設置爲0的結果很差。這有效地排除了所有可用於大多數能夠生成側向滾動輸入的設備的javascript解決方案。我的下一個攻擊過程是通過點擊事件。點擊做泡沫，爲了發生不希望的行爲，必須首先點擊有問題的溢出：hidden 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

如果我理解正確的問題，這應該是你要找的答案用於：

*使用容器，你不希望能夠滾動。

//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。

就這麼你知道，scroll事件是不可取消的，見here;然而，mousewheel事件是...所以here