Блокировка скролла всей страницы при наведении на элемент

Имеется такой код http://plnkr.co/edit/BsX7jHYKgXZU8SBE8tJY?p=preview Если не наводить мышкой на блок, скролл body с помощью стрелок клавиатуры работает При первом наведении на блок, скролл при помощи стрелок блокируется и больше не работает Как сделать так, чтобы при уходе мыши с блока, скролл при помощи стрелок клавиатуры снова работалИ то же самое со скроллом с помощью колёсика мыши Помогите пожалуйста, совсем ничего не получается
2 ответа

Думаю - разберешься.
<!DOCTYPE html>
<html>

 <head>
	<style>
		/* Styles go here */

		body {
		 height: 2000px;
		}

		.block {
		 background-color: red;
		 width: 100px;
		 height: 100px;
		 margin: 100px auto;
		}

		.hey {
		 background-color: green;
		}
	</style>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
 </head>

 <body>
 
 <div class="block"></div>

 <script>
 $(document).ready(function(){
 
 function disableScroll() {
 return false;
 }
 
 $('.block').mouseover(function(){
 $(this).addClass('hey');
 $(document).bind('keydown DOMMouseScroll mousewheel', disableScroll);
 });
 $('.block').mouseout(function(){
 $(this).removeClass('hey');
 $(document).unbind('keydown DOMMouseScroll mousewheel', disableScroll);
 });
 });
 </script>

 </body>

</html>


Lemme, большое спасибо! То, что нужно