我可以用JS禁用水平鼠標滾動嗎？

我正在構建一個使用javascript在頁面中垂直和水平導航以查看不同內容的單頁網站。我可以用JS禁用水平鼠標滾動嗎？

我希望用戶能夠上下滾動而不是水平（目前用戶可以水平在FireFox滾動，看到他們不應該能夠看到，除非他們使用的導航內容。

不幸我不能使用隱藏的overflow-x:;因爲它干擾了我正在使用的平滑滾動JS。

我確實發現了一些腳本（下面）來禁用任何鼠標滾輪移動，但我只想禁用水平移動。誰有幫助？

document.addEventListener('DOMMouseScroll', function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    e.cancelBubble = false; 
    return false; 
}, false);

來源

2011-09-22 Jay

可能使用[禁用JavaScript水平滾動條]重複（http://stackoverflow.com/questions/7503048/disable-horizontal -scroll-with-javascript） –

該代碼不會停止爲我滾動鼠標。只是一個普通的PC鼠標 –

我碰到了同樣的問題還有，「隱藏溢出-X」。你的代碼工作正常，但顯然會殺死垂直和水平滾動。我認爲你需要的額外位是檢查「e.axis」屬性。這是我有什麼：

document.addEventListener('DOMMouseScroll', function(e) { 
    if (e.axis == e.HORIZONTAL_AXIS) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     e.cancelBubble = false; 
    } 
    return false; 
}, false);

希望幫助！

來源

2011-11-17 16:50:36

不適合我。嘗試在tinybox打開時停止h鼠標滾動。 –

你可以簡單地用CSS樣式來完成。（僅適用於FF）CSS技巧是好的，但它並沒有爲Mac鼠標的水平滾動功能工作：

<body style=" overflow-x:hidden; "> 

<style> 
    body { overflow-x:hidden; } 
</style>

來源

2011-09-22 08:56:39 Carb0n1c

正如我所說，不幸的是我不能使用overflow-x：hidden;因爲它會干擾我正在使用的平滑滾動JS。 – Jay

@Jay我不認爲你可以做任何其他的方式，除非你編輯你的平滑滾動JS。你能分享你的順利滾動JS？ – Carb0n1c

我可以分享它，但一個CSS修復程序不會起作用。我嘗試了一堆解決方案。我希望以前有人使用過DOMMouseScroll。但感謝您的幫助。 – Jay

那麼，你的代碼只能在Firefox中工作，所以這裏是一個更通用的解決方案，但它也殺死了垂直滾動，到目前爲止我無法弄清楚如何阻止它。

if(window.addEventListener){ 
window.addEventListener('DOMMouseScroll',wheel,false);} 
function wheel(event){ 
event.preventDefault(); 
event.returnValue=false;} 
window.onmousewheel=document.onmousewheel=wheel;

來源

2013-09-25 20:49:43

一些實驗後，這段代碼工作

$(window).bind('mousewheel', function(e){ 
    if(e.originalEvent.wheelDeltaX != 0) { 
     e.preventDefault(); 
    } 
}); 
$(document).keydown(function(e){ 
    if (e.keyCode == 37) { 
     e.preventDefault(); 
    } 
    if (e.keyCode == 39) { 
     e.preventDefault(); 
    } 
});

這可防止OSX魔術鼠標，觸控板和默認的箭頭鍵從造成HORZ在Safari，Chrome的滾動和FF作爲其最新發布。

我可以不要求這是最好的解決方案，但它的工作原理。我擔心它可能會導致性能問題，因爲它將滾輪滾動的x軸增量設置爲0.

來源

2014-05-13 03:39:33 nerdwithme

沒有爲我工作。 –

我可以用JS禁用水平鼠標滾動嗎？

回答

相關問題