0

Приветствую. Меню работает по клику на кнопку, выезжает. Оно перекрывает окно полностью (position absolute и z-index). Но нужно запретить скролл под окном. Нашёл два варианта решения, оба рабочих, но приладить под свою задачу не получилось.

Вот js, которым меняю классы у кнопки и меню для открывания и закрывания.

$(document).ready(function(){

var $topSide = $('#slidemenu');

$('#open-button').click(function () {
    $topSide.toggleClass('slidemenu-open');



    $('#open-button').toggleClass('open-button-close');
});
});

А вот варианты, которыми можно заблокировать скролл: Вариант 1 и Вариант 2

Оба исполняют нормально, первый на мой взгляд компактнее, не требует либу подключать, но это роли не играет. Дело в том, что оба варианта работают за счёт две отдельных кнопок (вкл/выкл).

Как можно обе функции повесить на обычную ссылку или любой другой элемент (a, div, span) - чтобы ткнул на кнопку: открылось меню, заблокировался скролл; ткнул ещё раз - меню убралось, скролл работает.

4 ответа 4

3

Создайте класс в CSS со свойством overflow: hidden; и вешайте на тег <body> при открытии меню, удаляйте при закрытии.

1
  • для ПК версии данный вариант не годится, ибо он лишает возможности скроллить только мышкой + убирает саму полосу прокрутки - начинает дёргаться экран. Но мне нужно было для смартфонов, так что, годится. Отметил как ответ.
    – Aaron
    4 авг 2016 в 18:32
0

Чем не вариант проверять наличие класса?

$('#open-button').click(function () {
    if(!$('#slidemenu').hasClass('slidemenu-open')) // если не было открыто меню, запретить скролл
    {
        disableScroll.on();
    } else {
        disableScroll.off();
    }
    $topSide.toggleClass('slidemenu-open'); // открыть меню

    $('#open-button').toggleClass('open-button-close');
});
});
0

Вместо absolute используем fixed и не мучаемся более извращенными вариантами как убрать скролл.

1
  • да да, сделал fixed, но к нижележащим слоям всё равно применил overflow hidden
    – Aaron
    4 авг 2016 в 18:32
0

$('html, body').css('overflow', 'hidden'); - блокировка скролла. Если хотите вернуть в дефолтное состояние, то - $('html, body').css('overflow', '');

Ваш ответ

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

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