Форум

Szorstki · #1 (**permalink**) 30.03.2016, 12:45

Здравствуйте.

Подскажите, как можно запретить прокрутку (не убирая сами полосы прокрутки, чтобы контент не скакал)?

Идея такая: https://jsfiddle.net/Novitsky/77z57xfk/. Надо, чтобы при появлении меню прокрутка контента на заднем плане была заблокирована. overflow:hidden не подойдет, чтобы полоса прокрутки не убиралась.

destus · #2 (**permalink**) 30.03.2016, 12:52

<div style="height:2000px;"></div>
<script>
window.onscroll = () => window.scrollTo(0, 0);
</script>

Szorstki · #3 (**permalink**) 30.03.2016, 15:04

Спасибо.
Протестировал: https://jsfiddle.net/Novitsky/zf4qv89L/. Я вставил эту строчку в свой скрипт — работает, но наполовину. Как сделать, чтобы при удалении класса прокрутка снова начинала работать?

destus · #4 (**permalink**) 30.03.2016, 15:31

Небольшой пример.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <style>
        div{
            height : 2000px;
            border : 1px solid black;
        }
    </style>
  <script>
      $(function () {
          $('.nav-icon').click(function () {
              $('body').toggleClass('nav-active');
          });
          $('body').on({
              'mousewheel': function (e) {
                  if ($('body').hasClass('nav-active')){
                      e.preventDefault();
                      e.stopPropagation();
                  }
              }
          })
      })
  </script>
    <div class="nav-icon"><span><span class="invisible">Меню</span></span></div>
</body>
</html>

Szorstki · #5 (**permalink**) 30.03.2016, 17:24

Спасибо большое. Теперь работает, как надо.

Szorstki · #6 (**permalink**) 30.03.2016, 19:15

Тут вот подумал. Ради интереса, раз пошла такая пьянка. А можно до кучи запретить стрелки, PgUp, PgDn, Home, End и пробел, и разрешить удаление класса nav-active по Esc'пу?

Szorstki · #7 (**permalink**) 30.03.2016, 19:35

В инете нашел один скриптик:

// 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;
}

Запихнул в свой:

$('.nav-icon').click(function() {
	$('body').toggleClass('nav-active');
});
$('body').on({
	'mousewheel': function(e) {
		if ($('body').hasClass('nav-active')) {
			e.preventDefault();
			e.stopPropagation();
		}
	}
	// 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;
	}
})

Не работает.
Я понимаю, что сделал что-то не так, но у меня практически нулевые познания в JS.
Да и громоздкое какое-то решение, и события по Esc'пу в нем нет. (
И всякие //older FF и //older browsers мне ни к чему.

destus · #8 (**permalink**) 30.03.2016, 19:50

Szorstki,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <style>
        div {
            height: 2000px;
            border: 1px solid black;
        }
    </style>
    <script>
        $(function () {
          var keys = { 37: 1, 38: 1, 39: 1, 40: 1, 32: 1, 36 : 1, 35: 1 };
          $('.nav-icon').click(function () {
              $('body').toggleClass('nav-active');
          });
          $('body').on({
              'mousewheel': function (e) {
                  if ($('body').hasClass('nav-active')){
                      e.preventDefault();
                      e.stopPropagation();
                  }
              },
              'keydown': function (e) {
                  var key = e.keyCode
                  if (keys[key] && $('body').hasClass('nav-active')) {
                      e.preventDefault();
                      e.stopPropagation();
                  }
                  if (key == 27) {
                      $('body').removeClass('nav-active')
                  }
              }
          })
      })
    </script>
    <div class="nav-icon"><span><span class="invisible">Меню</span></span></div>
</body>
</html>

Szorstki · #9 (**permalink**) 30.03.2016, 20:08

Вообще суперски. Все работает. Спасибо!

Szorstki · #10 (**permalink**) 30.03.2016, 23:39

Только что проверил еще раз. Странно, почему-то в Firefox'е не блокирует прокрутку. С остальным все в порядке.

P. S. Вообще с последней версией FF какая-то фигня. И Flexbox стал некорректно работать.

Форум

Справочник

Discord чат

Курсы javascript