overflow-x：隱藏正在打破jquery滾動事件

我有一個問題，設置溢出x：隱藏在html和body元素阻止jquery滾動事件觸發。overflow-x：隱藏正在打破jquery滾動事件

CSS：

html, body { 
    overflow-x: hidden; 
}

JS：

$(function(){ 
    $(window).on("scroll", function(e){ 
    console.log("scrolling");  
    }); 
});

http://jsfiddle.net/r7Fqq/6/

自己嘗試一下：註釋掉溢出-X：隱藏和彈出打開控制檯。當您在html框中上下滾動時，您應該看到「滾動」記錄。重新註釋它並且滾動事件是無聲的。

有誰知道爲什麼會發生這種情況？我知道，當你設置隱藏溢出禁止滾動，但它應該只對你設置的軸（在這種情況下只有x）。預先感謝您的幫助。

來源

2013-07-15 jlarusso

如何'$（ '身體'）上（ '滾動'）'？ – Chad

更具體地說，你的窗口不滾動，你的html/body是。如果您刪除'height：100％;'您的窗口滾動將正常工作。 – Chad

當你設置overflow-x：hidden時，你看到的滾動條是針對身體的。收縮高度，你會看到兩個滾動條，一個用於身體，一個用於窗戶。所以...... Torr3ent說的。 http://jsfiddle.net/r7Fqq/7/ –

$(function() { 
    $(window).bind('mousewheel', function(event, delta) { 
     console.log("mousewheel"); 
     return false; 
    }); 
});

來源

2013-10-26 14:30:29 fritsMaister

有同樣的問題。解決方法是從html元素中刪除overflow-x：hidden，並將其僅留在body元素上，它應該可以工作。

來源

2015-12-09 23:02:12 MSwehli

是的。爲我工作。不知道爲什麼想。理論上，'overflow-x'只應該影響水平滾動，不是？ – jeteon

否則，只保留在'html'上。 – Alex78191

我在使用溢出滾動樣式對'html'和'body'進行樣式設置時檢測到窗口滾動事件時遇到了問題。 –

在css中設置body {height: 100%;}。那會工作。您可能希望在div上應用溢出屬性而不是整個body，然後相應地更改JS代碼。在主體上設置溢出屬性會消除其滾動功能。另一個解決方案可以使用本文中描述的Jquery wheel事件（https://stackoverflow.com/a/8378946/5348972）。

來源

2016-11-28 03:28:35

我也發現這種情況。當我們加入時：

body { 
    overflow-x: hidden; 
}

全部window.addEventListener('scroll')事件停止觸發。我相信這是因爲滾動事件不會移動到document.body。當我將eventListener更改爲document.body.addEventListener('scroll')時，事情再次開始工作。有趣的是，我的event.bubbles布爾值爲false。從我讀的滾動事件應該泡到窗口。

解決方案

變化

window.addEventListener('scroll',() => console.log('MEOW'))

到

document.body.addEventListener('scroll',() => console.log('MEOW'))

來源

2017-10-18 18:49:19

overflow-x：隱藏正在打破jquery滾動事件

回答

相關問題