负边距顶部并向上滚动

Question

我需要设置 margin-top < 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

对 ul 个元素应用 display:table-cell。这将克服负保证金问题。

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>

负边距顶部并向上滚动

negative margin-top and scroll up

html

css

scroll

overflow