3

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

document.onmousewheel = document.onwheel = function () {
  return false;
};
document.addEventListener("MozMousePixelScroll", function () {
  return false
}, false);
document.onkeydown = function (e) {
  if (e.keyCode >= 33 && e.keyCode <= 40) return false;
};
return false;

Вот ссылка на кодпен

P.S. overflow: hidden; не подходит, т.к. после отмены этого свойства будет скроллиться в самый верх страницы.

4
  • то-есть вы добавляете ивентлистенеры, а потом их надо удалить ? ) 6 июл 2017 в 20:11
  • При overflow: hidden ничего наверх скроллиться не будет. Проверяй скрипты и ссылки с href=#.
    – Qwertiy
    6 июл 2017 в 20:59
  • Убирать скролл не надо, надо изначально класть два элемента, чтобы внешний перекрывал скролл.
    – Qwertiy
    6 июл 2017 в 21:00
  • откуда вы знаете, что не будет? попробуйте зайти на сайт с помощью айфона 5, где менюшка сделана подобным способом, и посмотрите что будет. 7 июл 2017 в 12:32

1 ответ 1

1

Вынесите определение нужно скроллить или нет во внешнюю переменную и в ваших ф-ях возвращайте ее:

 window.can_scroll = true;

 document.onmousewheel = document.onwheel = function () {
    return window.can_scroll;
 };
 document.addEventListener("MozMousePixelScroll", function () {
    return window.can_scroll
 }, false);
 document.onkeydown = function (e) {
    if (e.keyCode >= 33 && e.keyCode <= 40) return window.can_scroll;
 };

Или удаляйте листенеры:

 // выключить скролл
 document.onmousewheel = document.onwheel = function () {
    return false;
 }; 
 function scrollOrNot() {
     return false;
 }
 document.addEventListener("MozMousePixelScroll", scrollOrNot, false);
 document.onkeydown = function (e) {
    if (e.keyCode >= 33 && e.keyCode <= 40) return window.can_scroll;
 };

 // включить скролл
 document.onmousewheel = document.onwheel = function () {
    return true;
 }; 
 document.onkeydown = function (e) {
    return true;
 };
 document.removeEventListener("MozMousePixelScroll", scrollOrNot, false);
2
  • хм, работает. Но как сделать, чтобы внутри менюшки можно было скроллить? 7 июл 2017 в 12:34
  • Тогда вам нужен 1 описанный мной вариант. Каждая из этих ф-й принимает аргумент event, у него в свою очередь есть св-во target, соответственно проверяйте event.target и если он равен вашим "менюшкам" - разрешайте скроллить, в остальных случаях - возвращайте window.can_scroll
    – drch
    7 июл 2017 в 12:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.