How do you block the scrolling of the page by the keys with jquery, up key (38) and down key (40), leaving the scrolling only with the mouse?
Lock scroll scrolling across screens
2
asked by anonymous 26.07.2016 / 16:16
1 answer
5
I suppose you are talking about any element less textarea, inputs and selects, if so you can use regex or ifs to check the combined element with event.target :
/^(textarea|input|select)$/i
$(document).keydown(function(evt) {
var key = evt.keyCode;
if ((key === 38 || key === 40) && !/^(textarea|input|select)$/i.test(evt.target.tagName)) {
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><textarea>testetestetestetestetestetestetestetestetestetestetestetestetesteteste</textarea>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Ifyouwanttoblockfromeither:
$(document).keydown(function(evt) {
var key = evt.keyCode;
if (key === 38 || key === 40) {
return false;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><textarea>testetestetestetestetestetestetestetestetestetestetestetestetesteteste</textarea>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Teste<br>Vanilla.js
(function () {
if (document.addEventListener) {
document.addEventListener("keydown", blockSrollByKeys, false);
} else if (document.attachEvent) {
document.attachEvent("onkeydown", blockSrollByKeys);
}
function blockSrollByKeys(evt) {
var key = evt.keyCode;
if ((key === 38 || key === 40) && !/^(textarea|input|select)$/i.test(evt.target.tagName)) {
evt.preventDefault();
return false;
}
}
})();<textarea>teste teste
teste teste
teste teste
teste teste
teste teste
teste teste
teste teste</textarea>
Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br> Teste <br>
26.07.2016 / 16:20