在這個(gè)問(wèn)題的幫助下：如何暫時(shí)禁用滾動(dòng)？制定一個(gè)工作概念非常容易：
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>
當(dāng)焦點(diǎn)位于具有數(shù)字類型的輸入字段之一時(shí)，它將禁用滾動(dòng)。在模糊時(shí)，它會(huì)再次啟用它。請(qǐng)記住，這不會(huì)阻止用戶用鼠標(biāo)手動(dòng)向下拖動(dòng)滾動(dòng)條。禁用它是不可能的。
