На `ul` вертикальная прокрутка рабочего стола работает, но сенсорная прокрутка мобильного телефона - нет. - PullRequest
0 голосов
/ 09 июля 2020

У меня есть один тег 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 раз, и вы увидите, что этот список не будет прокручиваться на мобильном устройстве. Но если вы используете настольный компьютер или настольный отладчик, он будет прокручиваться.

1 Ответ

0 голосов
/ 14 июля 2020

Сам нашел исправление.

Проблема заключалась в следующем: прокрутка была заблокирована с помощью preventDefault () где-то в моем коде.

Отладка: обнаружена проблема при добавлении события touchmove в мой контейнер div. Регистрируемые данные о событиях при прокрутке с телефона (через USB-отладку на рабочем столе). Он показал мне defaultPrevented: true. Вот где я понял, что это может быть preventDefault. Искал это в своем коде и обнаружил, что применил preventDefault к событию touchmove в одном месте.

Удалил это preventDefault и попробовал снова, и это сработало.

Извлеченный урок:

  1. Если пользовательский интерфейс можно прокручивать на рабочем столе, на мобильных устройствах это будет тоже самое, если только не совершить ошибку, как указано выше. Никаких отдельных css или JS не требуется для прокрутки на мобильных телефонах.
  2. Если CSS ничего не выдает, go и посмотрите JS тоже, и не игнорируйте его, думая, что JS имеет отношение к сенсорному экрану.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...