Двойной скрол при открытии модалки.

Тема в разделе "JavaScript", создана пользователем AlexGood, 21 июн 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    http://testbcard.dtraduga.vh55.hosterby.com/discounts_for_points.php - кликаем на любой из квадратов
    При первом открытии открытии модального окна все нормально(скрол 1), но после закрытия страница не скролится, при втором клике появляется двойной скрол, но после закрытия страница скролится. И так далее через раз.

    Решить проблему пытался так:

    Код:
    var divModal = document.querySelectorAll(".sail-categorie>div");
    for (var i =0; i < divModal.length; i++) {
        divModal[i].addEventListener("click", noScrollModal);
    }
    function noScrollModal(){
        if (body.style.overflowY == 'scroll' || body.style.overflowY == ''){
            body.style.overflowY = 'hidden';   
            }
            else{
                body.style.overflowY = 'scroll';
        }
    }
    Вопрос: 1) как вернуть прокрутку страницы после первого закрытия модалки?
    2) и как убрать двойной скролл при втором открытии модального окна?

    Что сделал не так?
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Проблема вот здесь:
    Код:
    function noScroll(){
        var myModal_gift_cupon = document.getElementById("myModal_gift_cupon");
        var myModal_delete_order = document.getElementById("myModal_delete_order");
        if(myModal_gift_cupon.style.display == 'block' || myModal_delete_order.style.display == 'block'){
            body.style.overflowY = "hidden";
            document.documentElement.style.overflowY = "hidden";
            body.style.overflowY = "100%";
            document.documentElement.style.overflowY = "100%";
        }else{
            body.style.overflow = 'auto';
            document.documentElement.style.overflowY = "auto";
        }
    }
    
    Выкиньте это полностью! Бутстрап сам следит за скролом при вызове модальных окон.

    Кстати, вы знаете, что document.documentElement - это свойство только для чтения? И зачем оно вообще вам, если оно отвечает за корневой элемент, что в случае веб страницы будет тег html.
    А у overflow (в любом из вариантов) не может быть процентного значения (вообще любого числового значения)!
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    - уже да

    Убрал и перезалил. Вроде как нормально работает - надо потестировать. Но прикол тот же повторяется с двумя скролами, если разрешение сделать 1199 и ниже и вверху справа нажать выбрать город или категорию (выпадающее меню) после его закрытия когда нажимаем на модальное окно опять снова эти скрола два :( Это я все с JS что-то намудрил?
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Да!
    Зачем вы при закрытии меню вешаете на боди overflow-y: scroll? Надо просто вообще убирать с него overflow.
    Из-за этого scroll Бутстрап не может сам всё обработать (он вешает класс modal-open для запрета прокрутки, а overflow-y: scroll прописанный прямо в теге этот класс перебивает).
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Это все я делал для safari. На нем когда открываешь эти меню и скролишь вниз или вверх до конца, потом начинает скролится сам фон, а так оно становилось нормально.
     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Видимо, вы меня не поняли.
    Не должно быть нигде конкретно overflow-y: scroll. Сильно сомневаюсь, что без этого где-то что-то может начать скролиться (как раз наоборот, именно из-за этого и будет скролиться).
     
    AlexGood нравится это.
  7. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Нет это вы меня не поняли наверное), или я по еврейски излагаю. Чтобы на сафари все нормал было, когда меню открыто, body делалось overflow: hidden чтобы по окончанию меню не начал скролится фон, ну и когда наоборот закрыто чтобы страница снова скролилась, body возвращался overflow:scroll; Это делалось сугубо только из-за сафари, так как этот глюк только в нем наблюдался непонятно почему, когда во всех остальных браузерах было все отлично.
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Вот это я как раз понял. Это ведь было моё предложение и не только для Сафари.

    А вот тут вы таки меня не поняли. В третий раз повторяю: не надо этого делать! Отсюда и появляется второй скролл.
    И вы не "возвращаете" его, а добавляете, ибо изначально там нет scroll, изначально там вообще нет overflow, но браузеры по умолчанию считают это за visible. А ставя scroll - вы принудительно создаёте скроллбар.

    Это не глюк и не только в Сафари.
    Если есть несколько вложенных блоков с прокруткой, то при прокручивании самого внутреннего до конца начинает прокручиваться его ближайший родитель со скроллом и т.д. Соответственно, чтоб родитель не прокручивался, надо ему ставить hidden.
     
    AlexGood нравится это.
  9. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Да, я помню что вы предлагали.
    - а вот этого я не знал.
     
  10. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
  11. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Я не знаю, за что этот код отвечает, поэтому просто опишу принцип.
    Во-первых, забудьте о существовании значения scroll! Если вы хотите где-то добавить прокрутку - используйте auto, потому что скролл - это принудительное создание скроллбара (даже если у вас одна строка текста).
    А во-вторых, если вы где-то вешали hidden, а затем хотите отменить его, то не надо вешать какое-то новое значение - отмените вообще тот тип overflow (в данном случае overflowY), который вы вешали - это вернёт прокрутку к состоянию до навешивания hidden.
     
    AlexGood нравится это.