在這個問題的幫助下：如何暫時禁用滾動？制定一個工作概念非常容易：
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
// Select all input elements
var inputElems = document.getElementsByTagName('input');
// Turn them into an array
inputElems = Array.prototype.slice.call(inputElems);
// Create event listeners for input elements where type equals number
inputElems.forEach(function(elem) {
if(elem.type.toLowerCase() == 'number') {
elem.addEventListener('focus', disableScroll, false);
elem.addEventListener('blur', enableScroll, false);
}
});
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
#container {
height: 300px;
width: 300px;
overflow: auto;
}
#inputs {
height: 1000px;
width: 300px;
}
<div id="container">
<div id="inputs">
<input type="text" value="This is a text input"/><br/>
<input type="number"/><br/>
<input type="number"/><br/>
<input type="number"/><br/>
<input type="number"/>
</div>
</div>
當焦點位于具有數字類型的輸入字段之一時，它將禁用滾動。在模糊時，它會再次啟用它。請記住，這不會阻止用戶用鼠標手動向下拖動滾動條。禁用它是不可能的。
