У меня есть один тег ul
со стилями max-height: 180px
и overflow: auto
.
Этот ul
будет иметь больше тегов li
, добавляемых динамически (что-то вроде добавления li
при нажатии кнопки) .
Проблема : я могу отлично прокручивать элементы списка, если добавлено больше li
тегов, которые не соответствуют максимальной высоте контейнера. Но это происходит только на рабочем столе. Когда я пробую то же самое в своем мобильном chrome браузере, он не прокручивается.
Пробовал следовать, но не повезло:
z-index
, значение около 1000000 или выше . overflow: scroll
, overflow-y: scroll
, overflow: auto
- перекрытие другими элементами, ни один тег
<body>
имел overflow: hidden
, попытался удалить и его
Вопрос : Что еще я должен отлаживать? Не удалось найти много решений / документации по этому поводу.
Совместное использование шагов воспроизведения, приведенных ниже, но не используйте sh, чтобы получить прямое решение из ваших усилий. Для продолжения нужны только некоторые указатели.
Вот мой тестовый сайт с репро: https://interesting-my-store.myshopify.com/products/15mm-combo-wrench, откройте эту страницу на мобильном телефоне и нажмите красную кнопку со значком сердца на ней. Появится модальное окно. Нажмите «Создать новую коллекцию» 10 раз, и вы увидите, что этот список не будет прокручиваться на мобильном устройстве. Но если вы используете настольный компьютер или настольный отладчик, он будет прокручиваться.