Как с помощью Vue js запретить скролл страницы?

Question

[Felzer]

Как с помощью Vue js запретить скролл страницы

Comments

[SagePtr]

Назначить странице overflow: hidden?

Answer 1

[evilray]

Скролл страницы запрещается с помощью css:

body {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden; 
}

Comments

[dpts]

Такой вариант приемлем только, если запретить скролл навсегда.
Если в зависимости от действий пользователя надо отключать/включать скролл - такой вариант устраивает скачки контента.

Например, мне надо запретить скролл документа под модальным окном, при его открытии, и обратно разрешить при закрытии.

Пользуясь вашей методикой, я получу изменение ширины/высоты контента за счет скрытия/показа скроллбаров.

Вопрос в том, как отключить скролл не пряча скроллбар?

Решение проверенное на дэсктопах:

methods:{
		preventDefault: function(e) {
			e = e || window.event;
			if (e.preventDefault)
				e.preventDefault();
			e.returnValue = false;  
		},
		disableScroll:function(){
			window.addEventListener('DOMMouseScroll', this.preventDefault, false);
			document.addEventListener('wheel', this.preventDefault, {passive: false});
			document.addEventListener('scroll', this.preventDefault, {passive: false});
		},
		enableScroll:function(){
			window.removeEventListener('DOMMouseScroll', this.preventDefault, false);
			document.removeEventListener('wheel', this.preventDefault, {passive: false});
			document.removeEventListener('scroll', this.preventDefault, {passive: false});
		}
}

Запретит/Разрешит скролл колесом мыши и клавишами.