我的<div>固定高度为100px。在<div>内部有一个超过100 PX高度的<ul>。此<ul>应该滚动(请参见下面的代码(。除iPad上的Safari以外，所有浏览器都可以很好地工作。然后该页面本身可滚动，但不能滚动<ul>。如何在iPad上在Safari中滚动<ul>？
我尝试了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>开始，最好将内联样式移动到CSS样式表，并在可能的情况下将类和/或ID添加到您的HTML。
要回答您的问题，您想在父母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>