Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2016, 12:45
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Запрет прокрутки
Здравствуйте.

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

Идея такая: https://jsfiddle.net/Novitsky/77z57xfk/. Надо, чтобы при появлении меню прокрутка контента на заднем плане была заблокирована. overflow:hidden не подойдет, чтобы полоса прокрутки не убиралась.
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2016, 12:52
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,159

<div style="height:2000px;"></div>
<script>
window.onscroll = () => window.scrollTo(0, 0);
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 30.03.2016, 15:04
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Спасибо.
Протестировал: https://jsfiddle.net/Novitsky/zf4qv89L/. Я вставил эту строчку в свой скрипт — работает, но наполовину. Как сделать, чтобы при удалении класса прокрутка снова начинала работать?
Ответить с цитированием
  #4 (permalink)  
Старый 30.03.2016, 15:31
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,159

Небольшой пример.
<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 30.03.2016, 17:24
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Спасибо большое. Теперь работает, как надо.
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2016, 19:15
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Тут вот подумал. Ради интереса, раз пошла такая пьянка. А можно до кучи запретить стрелки, PgUp, PgDn, Home, End и пробел, и разрешить удаление класса nav-active по Esc'пу?
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2016, 19:35
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

В инете нашел один скриптик:
// 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 мне ни к чему.
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2016, 19:50
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,159

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>
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2016, 20:08
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

Вообще суперски. Все работает. Спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 30.03.2016, 23:39
Аспирант
Отправить личное сообщение для Szorstki Посмотреть профиль Найти все сообщения от Szorstki
 
Регистрация: 15.02.2012
Сообщений: 51

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

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

Последний раз редактировалось Szorstki, 30.03.2016 в 23:52.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите убрать полосу прокрутки при анимации контента Lifemaster Элементы интерфейса 6 31.07.2015 02:59
Создание своей собственной прокрутки для блока arcmag Общие вопросы Javascript 1 06.02.2015 13:50
Полоса прокрутки SELECT amf1k Элементы интерфейса 0 20.09.2013 15:52
Запрет прокрутки к HTML метке lidervik Events/DOM/Window 3 30.08.2013 07:58
div в конец полосы прокрутки vladimircape Events/DOM/Window 1 03.05.2012 02:11