Невозможно прокрутить меню - содержимое «за» прокручивается меню - PullRequest
Новая
       42

Невозможно прокрутить меню - содержимое «за» прокручивается меню

0 голосов
/ 20 марта 2020

Я создал небольшое меню на основе попутного ветра css. Он работает нормально, но есть одна вещь: если это меню отображается на мобильных устройствах, пользователь прокручивает содержимое страницы, которая находится «позади» меню. Поэтому некоторые пункты меню не могут быть отображены.

Я создал кодовую ручку, чтобы продемонстрировать это:

https://codepen.io/spqrinc/pen/RwPBBKq

Вот как я определил фиксированная позиция меню: 

<div class="bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 fixed">
        <div class="flex items-center justify-between px-4 py-3 md:p-0">
            [...]
        </div>
</div>

Я также создал gif, чтобы показать, что я имею в виду - просто нажмите на изображение, чтобы запустить анимацию gif:

Example

Я не уверен, почему это происходит. Думаю, я что-то напутал с фиксированной позицией. Поэтому я очень благодарен за вашу помощь - моя цель - иметь меню, которое можно прокручивать и фиксировать на мобильных устройствах.

Ответы [ 3 ]

0 голосов
/ 24 марта 2020

Я вижу два возможных решения, одно из которых включает JavaScript, а другое нет.

Я бы порекомендовал решение без JavaScript и позже, улучшив его JavaScript.

Первым решением было бы использовать sticky позицию на панели навигации вместо фиксированной.

Я создал кодовое поле здесь , чтобы продемонстрировать его (изменить размер для " мобильный макет ").

Хорошая часть - это то, что работает из коробки, только смена класса (липкий класс): 

<div class="bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 sticky">
  <div class="flex items-center justify-between px-4 py-3 md:p-0">
    [...]
  </div>
</div>

Отрицательным является то, что меню не является фиксированным .

Для этого нам понадобится немного JavaScript (не добавлено в кодовую ручку).

По сути, нам нужно предотвратить переполнение на "теле" (в вашем случае, не фактическое тело, но область, в которой находится содержимое) и добавление свойства bottom для определения высоты панели навигации в дополнение к overflow-y: scroll; в навигации.

Я создал этот код чтобы проиллюстрировать это. Снова, просмотрите его в «мобильном макете».

Это участвующие классы: 

.header-wrapper {
  bottom: 0;
  overflow-y: scroll;
}

body {
  overflow: hidden;
}

Я добавил этот класс к первому дочернему элементу header элемента: 

<header class="lg:mb-20">
    <div class="header-wrapper bg-gray-500 md:flex md:justify-between md:items-center md:px-4 md:py-3  w-full z-50 top-0 fixed">
  </div>
</header>

Этот класс нужно добавлять только на мобильные устройства и только при открытом меню.

Надеюсь, это поможет!

0 голосов
/ 24 марта 2020

Учитывая, что ваше меню полноэкранное, есть хитрость, которую вы можете сделать. Короткая история: установите фиксированное положение тела, затем установите относительное положение меню, чтобы вы могли использовать естественную прокрутку.

Предполагается, что весь пользовательский интерфейс заключен в контейнер (достаточно простого div) и не укладываясь прямо в body, должно применяться следующее.

Когда вы открываете меню, сделайте следующее: 

const uiContainer = document.getElementById('ui-container');
uiContainer.style.position = 'fixed';

/* Store scrollX and scrollY in some safe location.
 * You will need them when the menu closes. */
uiContainer.style.top = `-${window.scrollY}px`;
uiContainer.style.left = `-${window.scrollX}px`;
uiContainer.style.width = '100%';

Когда меню закрывается, сделайте следующее: 

uiContainer.style.position = null;
uiContainer.style.width = null;
uiContainer.style.top = null;
uiContainer.style.left = null;

window.scrollTo(savedScrollX, savedScrollY);

Затем вы можете добавить свое дочернее меню в body и оформить его с помощью position: relative, и прокрутка будет естественным образом обрабатываться любым браузером.

HTH

0 голосов
/ 21 марта 2020

Это потому, что вы применили fixed там. Для маленьких экранов вы можете использовать что-то вроде absolute, это зависит от того, чего вы хотите достичь.

Но absolute md:fixed должно это исправить. Оттуда вы можете настроить его так, как хотите.

...