Disable Scrolling click

by Alex

HTML

<div id="page">
    
    <button id="enable">enable scrolling</button>
    <button id="disable">disable scrolling</button>
    <strong id="status" class="enabled">enabled</strong>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae velit sit amet velit rhoncus mattis. Etiam placerat ipsum sit amet arcu vestibulum ultricies pellentesque urna molestie. Donec tincidunt fringilla mi, non aliquet ipsum porttitor eget. Pellentesque et lobortis nisi. Nam lectus lectus, molestie nec facilisis pellentesque, sollicitudin a neque. Etiam sed tristique eros. Sed ac sagittis urna. Etiam elementum lectus sit amet enim aliquam sit amet egestas purus tristique. Aliquam lobortis posuere dolor, vitae lobortis arcu pharetra ut. Mauris gravida cursus turpis, id placerat justo imperdiet quis. Ut fringilla molestie tristique. Vestibulum pellentesque nisl vulputate magna viverra fermentum.</p>

<p>Integer vulputate orci a massa tristique consequat. Sed vestibulum sapien at justo venenatis lacinia. Quisque ut massa mi. Quisque pellentesque tincidunt dolor a molestie. Suspendisse non arcu aliquam enim vehicula euismod et ac neque. Vestibulum quis massa mi, ac mattis turpis. Sed egestas nunc eget libero porta sed bibendum diam tristique. Maecenas orci quam, adipiscing id ornare dictum, fermentum ac tellus. Quisque luctus purus nec est tristique dapibus. Praesent posuere nunc vitae nisl accumsan accumsan. Pellentesque nunc quam, blandit et convallis ac, gravida sit amet augue. Duis ultricies, libero in pharetra lacinia, mi quam porta orci, aliquam hendrerit elit mauris eu ipsum. Suspendisse eget tellus vel orci lobortis pretium eget non justo.</p>

<p>Mauris interdum tortor et sapien aliquet hendrerit. Donec vitae porttitor ligula. Nulla convallis, nibh at elementum volutpat, quam ante consequat elit, vel adipiscing libero augue id nisi. Quisque mollis neque ut leo consequat vel egestas arcu vehicula. Pellentesque in mi vel arcu volutpat gravida....

CSS

* { margin:0; padding:0; }
#page { width:400px; margin:20px; }
p { margin:20px 0; }
button { padding:2px 10px; }
.enabled { color:green }
.disabled { color:red }

JavaScript

document.getElementById("enable").onclick = function() {
  enable_scroll();
  document.getElementById("status").innerHTML = "enabled";
    document.getElementById("status").className = "enabled";
};

document.getElementById("disable").onclick = function() {
  disable_scroll();
  document.getElementById("status").innerHTML = "disabled";
  document.getElementById("status").className = "disabled";
};



// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
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 = document.onmousewheel = wheel;
  document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
}