Sunday, July 27, 2014

Javascript to Disable Mouse Scroll for All Browsers including IE


I use these codes to temporarily disable the mouse scroll when I display a pop-up DIV. Although this is not quite necessary but it looks more professional to have mouse scroll locked when the pop-up appears. However the side scroll bar is still working with these following codes. You can still use the mouse to drag the page upward or downward.

The following javascript codes/functions are used: (to lock mouse scroll only that uses the center wheel of a mouse)


<script>

var ff = (navigator.userAgent.indexOf("Firefox") != -1);

if (ff) {
  mousewheelevent = "DOMMouseScroll";
}
else {
  mousewheelevent = "mousewheel";
}

function lockScroll() {
 if (document.attachEvent) {
   document.attachEvent("on"+mousewheelevent, catchWheel);
 }
 else if (document.addEventListener) {
   document.addEventListener(mousewheelevent, catchWheel, false);
 }
// you can also hide the scrollbar by using the following simple javascript command:
// document.body.style.overflowY="hidden";

}

function unlockScroll() {
 if (document.detachEvent) {
   document.detachEvent("on"+mousewheelevent, catchWheel);
 }
 else if (document.removeEventListener) {
   document.removeEventListener(mousewheelevent, catchWheel, false);
 }
// you can also recover the scrollbar by using the following simple javascript command:
// document.body.style.overflowY="scroll";

}


function catchWheel(e){

 if (e.preventDefault) {
  e.preventDefault();
 }
 else {
  e.returnValue = false;
 }
}


lockScroll(); // to lock scroll
unlockScroll(); // to unlock scroll


</script>


No comments:

Post a Comment