Как отключить прокрутку страницы, когда открыто меню?

Question

[Андрей Аксёнов]

Нужно отключить прокрутку тела или страницы, когда открывается меню. Короче, прокрутка должна быть только внутри меню. Кто знает как это сделать? )
Код тут - https://jsfiddle.net/1k2dym70/1/

Comments

[Антон Литвиненко]

Body {overflow: hidden}
Jsfiddle в отличии от codepen с мобилки не посмотреть

[Андрей Аксёнов]

Антон Литвиненко, Прокрутка вообще отключается полностью, хоть открыто меню, хоть закрыто

[Максим]

а что там за ужас ? 3 версии jquery подключено

[Андрей Аксёнов]

Максим Ленский, Это для модальных окон и мобильного меню, их можно было бы и удалить конечно

[Антон Литвиненко]

Андрей Аксёнов, при окрытии меню вешаем класс который добавляет оверфлоу хидден для боди, при закрытии убираем, это же очевидно

Answer 1

[Danny Arty]

Так?

Comments

[Андрей Аксёнов]

Получилось, но после этого прокрутка тела отключается, если закрыть меню от клика в любом месте

[Danny Arty]

Андрей Аксёнов, чекни

[Андрей Аксёнов]

Danny Arty, Супер просто, спасибо!

Answer 2

[Олег Олегович]

Мне больше нравиться вариант с добавлением класса.
Например:

В css добавляем

.no_scroll{
  overflow: hidden;
}

А в js При открытии меню
$('body').addClass('no_scroll')
При закрытии
$('body').removeClass('no_scroll')

Если нужно чтобы документ не прыгал когда у body исчезает скролл можно использовать функцию.

function calcScroll() {
		let div = document.createElement('div');

		div.style.width = '50px';
		div.style.height = '50px';
		div.style.overflowY = 'scroll';
		div.style.visibility = 'hidden';

		document.body.appendChild(div);
		let scrollWidth = div.offsetWidth - div.clientWidth;
		div.remove();

		return scrollWidth;
	}

И при открытии добавить еще
$('body').css('margin-right', calcScroll()+'px')
При закрытии убрать
$('body').css('margin-right', '0px')

Comments

[Андрей Аксёнов]

То что документ не двигается, это плюс. Буду использовать этот вариант. Спасибо!