Прокручиваемый <ul>на странице без прокрутки - Safari на iOS - PullRequest
Новая
       7

Прокручиваемый <ul>на странице без прокрутки - Safari на iOS

0 голосов
/ 18 мая 2019

У меня есть <div> с фиксированной высотой 100px. Внутри <div> есть <ul>, высота которого превышает 100 пикселей. Это <ul> должно быть прокручиваемым (см. Код ниже). Это прекрасно работает во всех браузерах, кроме Safari на iPad. Сама страница затем прокручивается, но не <ul>. Как сделать прокрутку <ul> в Safari на iPad?

Я пробовал body-scroll-lock (из https://github.com/willmcpo/body-scroll-lock), но это решение для другой проблемы. 

<html>

<head></head>

<body>
  <div style="max-height: 100px;overflow:hidden;">
    <ul style="-webkit-overflow-scrolling: touch;display: block;overflow: hidden scroll;max-height: 100px;">
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
      <li>
        Lorem ipsum ... Lorem ipsum dolor sit amet.
      </li>
    </ul>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 18 мая 2019

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

Чтобы ответить на ваш вопрос, вам нужно иметь overflow: scroll вместо overflow: hidden на вашем родительском div.Это автоматически скроет весь переполненный контент, но позволит вам прокручивать его.Вам не нужно никаких дополнительных стилей для детей! 

.list-wrapper {
  max-height: 100px;
  overflow: scroll;
}
<html>

  <body>
    <div class="list-wrapper">
      <ul>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
        <li>
          Lorem ipsum ... Lorem ipsum dolor sit amet.
        </li>
      </ul>
    </div>
  </body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...