负边距 - 向上和向上滚动

Question

我需要设置margin-top＆lt; 100或200px，可以向上滚动到first和last eight元素。

如果我设置margin-top: -200px;，我将无法向上滚动直至顶部。

ul {
  margin-top: -50px;
  overflow-y: hidden;
  margin-top: -200px;
}

.container {
  height: 50px;
  overflow-y: scroll;
}

<div class="container">
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
  </ul>
</div>  

Answer 1

为display:table-cell元素应用ul。这将克服负利润问题。

ul {
  display:table-cell;
  overflow-y: hidden;
  margin-top: -200px;
}

.container {
  height: 50px;
  overflow-y: scroll;
}

<div class="container">
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
    <li>eight</li>
  </ul>
</div>