mouse wheel event stop windows scroll

mouse wheel event stop windows scroll

by Simplybj

HTML

<div class='height' id='height'>
</div>
<div class='one' id='one'>
  <div class='two' id='two'>
  </div>
</div>

<span class="result">no result</span>

CSS

.one {
  height: 300px;
  width: 400px;
  background-color: green;
  margin: 0 auto;
}
body
{
  height:900px;
}

.two {
  height: 200px;
  width: 300px;
  background-color: red;
  margin: 0 auto;
}
.height
{
  height:500px;
  widht:400px;
   background-color: blue;
}
.result
{
  position:fixed;
  top:0px;
  left:0px;
   background-color: aqua;
}

JavaScript

function scrool(event) {
  if (event.deltaY > 0) {
    $('.result').text('scroll up' + event.deltaY + ' '+this.id);
  } else {
    $('.result').text('scroll down' + event.deltaY+' '+ this.id);
  }  
}
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}
function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}
var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
//window.addEventListener(event, scrool);
document.getElementById("one").addEventListener("wheel", scrool);
document.getElementById("two").addEventListener("wheel", scrool);
document.getElementById("one").addEventListener("mouseover", disableScroll);