Question

我有一个<div>，高度固定为100px。在<div>内部有一个<ul>，高度超过100像素。此<ul>应该是可滚动的（请参见下面的代码）。在iPad上的Safari以外的所有浏览器中，此功能都可以正常工作。然后页面本身可以滚动，但<ul>则不能滚动。如何使<ul>在iPad上的Safari中可滚动？

我尝试了{-{3}}中的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>

Answer 1

开始时，最好的做法是尽可能将内联样式移到CSS样式表，并在HTML中添加类和/或ID。

要回答您的问题，您想在父div上使用overflow: scroll而不是overflow: hidden。这将自动隐藏所有溢出的内容，但允许您滚动浏览它。您不需要对孩子的任何其他样式！

.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>

不可滚动页面中的可滚动<ul>-iOS上的Safari

1 个答案: