LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Stop Scrolling WebPage Via Mouse Wheel And Keyboard Keys

Stop Scrolling WebPage Via Mouse Wheel And Keyboard Keys

Stop-Scrolling-WebPage-Via-Mouse-Wheel-And-Keyboard-Keys
Many web designer want to make some different things and want to equip there design with totally different design pattern. So like if you are working on a design like to work with buttons on screen and want to stop the windows shortcut and direct keys to effect on your web page then you can make a totally different view.

So sometime designer want to let the viewer to scroll through clicking buttons on screen by avoiding the defaults buttons and other ways so here we are sharing some JavaScript snippets that will stop keyboards arrows keys to work on your web page only and mouse wheel to working on your web page only. So for this garb the below code and move for it.

Features:

1.) Stop scrolling your web-page.
2.) Will stop working of arrows keys of keyboard.
3.) Also stop working of mouse wheel functions.
4.) Pure JavaScript codes.
5.) No external file of code added.

How To Stop Scrolling WebPage Via Mouse Wheel And Keyboard Keys?

Just add the below code on your desired page where you want to stop these functions of your keyboard and mouse.

<script>
var keys = [37, 38, 39, 40];
function preventDefault(e) {
 e = e || window.event;
 if (e.preventDefault)
 e.preventDefault();
 e.returnValue = false; 
}
function keydown(e) {
 for (var i = keys.length; i--;) {
 if (e.keyCode === keys[i]) {
 preventDefault(e);
 return;
 }
 }
}
function wheel(e) {
 preventDefault(e);
}
function disable_scroll() {
 if (window.addEventListener) {
 window.addEventListener('DOMMouseScroll', wheel, false);
 }
 window.onmousewheel = wheel;
 window.onkeydown = keydown;
}
window.onload = disable_scroll();
</script>

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome snippet. If you have any problem then feel free to ask us. We will help you with what we can or have. That’s it! If you know of some other script snippets, let us know using the comments below and we will add them to this article!

Recommended For You:
Input Tags With Automatically Comma Separated Formatting Using JavaScript

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *