如何防止鼠標滾動到懸停元素之外？

Question

我有一個設置爲溢出的div：scroll ;.我得到了我想要的滾動條。但是，當使用鼠標滾動滾動div時，它會在頁面的頂部或底部滾動頁面的其餘部分。

我該如何根據懸停的內容只滾動div或整個頁面？

Answer 1

首先我不認爲你可以重寫滾動事件。所以這就是我會做的。我不知道jquery，但這裏有一些直接的javascript。

document.getElementById('scrollDiv').onmouseover=function(){ 
    document.getElementByTagName('body')[0].style.overflow='hidden'; 
} 
document.getElementById('scrollDiv').onmouseout=function(){ 
    document.getElementByTagName('body')[0].style.overflow=''; 
} 

顯然你可以調整這一點，但這是基本的想法。另外，如果你需要你可以做其他測試用例。就像如果div有重點，然後做同樣的事情。取決於你的設置。

Answer 2

在這種情況下，我認爲你必須重寫body的默認onscroll事件。在您的處理程序中，您需要手動滾動div的內容。

Answer 3

如果鼠標位於div的範圍內，您可以測試鼠標位置並取消文檔的滾動事件。