Block scrolling by screens

Asked

Viewed 113 times

2

as that blocks the scrolling of the page by the keys with jquery, up key(38) and down key(40), leaving the scrolling only by the mouse?

javascript jquery html5

1 answer

5


I suppose you’re talking about any element except textarea, inputs and selects, if so you can use regex or ifs to check the element combined 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>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>

If you want to block anyone:

$(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>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>

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>

  • 1

    That’s right, helped me a lot u.u

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.