My Programming Tricks: Javascript to Disable Mouse Scroll for All Browsers including IE

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

Subscribe to: Post Comments (Atom)