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) и как убрать двойной скролл при втором открытии модального окна? Что сделал не так?
Проблема вот здесь: Код: 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 (в любом из вариантов) не может быть процентного значения (вообще любого числового значения)!
- уже да Убрал и перезалил. Вроде как нормально работает - надо потестировать. Но прикол тот же повторяется с двумя скролами, если разрешение сделать 1199 и ниже и вверху справа нажать выбрать город или категорию (выпадающее меню) после его закрытия когда нажимаем на модальное окно опять снова эти скрола два :( Это я все с JS что-то намудрил?
Да! Зачем вы при закрытии меню вешаете на боди overflow-y: scroll? Надо просто вообще убирать с него overflow. Из-за этого scroll Бутстрап не может сам всё обработать (он вешает класс modal-open для запрета прокрутки, а overflow-y: scroll прописанный прямо в теге этот класс перебивает).
Это все я делал для safari. На нем когда открываешь эти меню и скролишь вниз или вверх до конца, потом начинает скролится сам фон, а так оно становилось нормально.
Видимо, вы меня не поняли. Не должно быть нигде конкретно overflow-y: scroll. Сильно сомневаюсь, что без этого где-то что-то может начать скролиться (как раз наоборот, именно из-за этого и будет скролиться).
Нет это вы меня не поняли наверное), или я по еврейски излагаю. Чтобы на сафари все нормал было, когда меню открыто, body делалось overflow: hidden чтобы по окончанию меню не начал скролится фон, ну и когда наоборот закрыто чтобы страница снова скролилась, body возвращался overflow:scroll; Это делалось сугубо только из-за сафари, так как этот глюк только в нем наблюдался непонятно почему, когда во всех остальных браузерах было все отлично.
Вот это я как раз понял. Это ведь было моё предложение и не только для Сафари. А вот тут вы таки меня не поняли. В третий раз повторяю: не надо этого делать! Отсюда и появляется второй скролл. И вы не "возвращаете" его, а добавляете, ибо изначально там нет scroll, изначально там вообще нет overflow, но браузеры по умолчанию считают это за visible. А ставя scroll - вы принудительно создаёте скроллбар. Это не глюк и не только в Сафари. Если есть несколько вложенных блоков с прокруткой, то при прокручивании самого внутреннего до конца начинает прокручиваться его ближайший родитель со скроллом и т.д. Соответственно, чтоб родитель не прокручивался, надо ему ставить hidden.
Я не знаю, за что этот код отвечает, поэтому просто опишу принцип. Во-первых, забудьте о существовании значения scroll! Если вы хотите где-то добавить прокрутку - используйте auto, потому что скролл - это принудительное создание скроллбара (даже если у вас одна строка текста). А во-вторых, если вы где-то вешали hidden, а затем хотите отменить его, то не надо вешать какое-то новое значение - отмените вообще тот тип overflow (в данном случае overflowY), который вы вешали - это вернёт прокрутку к состоянию до навешивания hidden.
