Как сделать scroll неактивным?

Question

[kode_krendel]

Обращаю внимание - не отключение скролла, а именно надо сделать чтобы не работала прокрутка. codepen.io/kodekrendel/pen/aJvRZX

Суть: я хочу чтобы при нажатии на кнопку вызова full-screen overlay navigation (вверху в хедере справа button) отключалась прокрутка. Не могу сообразить какое свойство CSS мне нужно и к какому элементу применять? К body, html не могу, по крайней мере не знаю как это сделать из Vue (там область видимости в пределах #app). Пробовал варианты из .scroll-off, но это не то.

Либо второй вариант: как сделать чтобы при исчезновении скролла не смещался button? Попробуйте откомментить .scroll-off и увидите, что при нажатии на button скролл исчезает, но и button смещается. Как его закрепить на одном месте, при этом не поламав функционала (fixed header и тд)?

Вроде бы понятно описал проблему, если что уточню.

Answer 1

[Александр]

системный скролл css-ом никак не отключить, варианты:

• body overflow: hidden, чтоб не было рывков, и все элементы оставались на местах, можно добавить padding-left, но у всех браузеров он разный, у хрома это около 17px
  
• поставить свой скролл, их на просторах интернета полно
  
• перехватывать событие скролла js
  

Comments

[kode_krendel]

А на разных ОС у Хрома один и тот же скролл, 17px? Или и там есть отличие?
Не видел за всю свою жизнь ниодного нормального кастомного скролла, все кривые и дают ужасный UX. Кроме того, я не юзаю jQuery, а пилить свой косыль нереально.

Можно пару слов по перехватыванию события скролла? Что имеется ввиду?

[Александр]

kode_krendel: на разных ОС я думаю и скролл разный, можно конечно подстраиваться, довольно сложный костыль.
Можно найти и без jQuery, особенно в пору тенденций отказа от этой библиотеки.
перехват сколла я вот что имел ввиду

[kode_krendel]

lebonnet: офигенная ссылка, спасибо.

[kode_krendel]

Мне еще вот такой хак подогнали - codepen.io/znck/full/pegyBx

Answer 2

[Дмитрий Пыркин]

при нажатии на кнопку делать body overflow:hidden

Comments

[kode_krendel]

Это всего лишь отключение скролла, что я и так так делаю. При этом происходит смещение в сторону кнопки. Я это все же описал в вопросе.