溢出-y滚动的相对位置

Question

我有这个标记。

<ul style="position:relative; height: 150px; overflow-y: scroll; overflow-x: visible">
  <li style="position: absolute; left: -300px;">text content</li>
  <li style="position: absolute; left: -300px;">text content</li>
  ...
  <li style="position: absolute; left: -300px;">text content</li>
  <li style="position: absolute; left: -300px;">
    <a href="#" id="load-more">Load more</a>
  </li>
</ul>

标记来自jquery ui自动完成，列表将从左向右逐个滑动。当我点击#load-more我所期望的只有垂直滚动条时，不会出现垂直和水平滚动条。此外，溢出的内容使幻灯片项仅在<ul>区域内可见，而不在此区域之外。

出了什么问题？