Ответы пользователя по тегу Мобильная разработка
  • Как подружить height 100vh и chrome mobile?

    evorios
    @evorios
    Для себя я решил эту проблему таким образом:

    body {
      margin: 0;
      overflow: hidden;
    }
    
    body > .scroll-box {
        position: relative;
        left: 0;
        right: 0;
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }

    Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
    PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:
    $modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
    $modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));
    Ответ написан
    1 комментарий