2

I need to set margin-top < 100 or 200px and be able to scroll up till the first and last eight element.

If I set margin-top: -200px; I will not be able to scroll up until the top.

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>
aMJay
  • 2,215
  • 6
  • 22
  • 34
Fabrizio Bertoglio
  • 5,890
  • 4
  • 16
  • 57

1 Answers1

2

Apply display:table-cell for the ul elements. That will overcome the negative margin issue.

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>
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
  • how can I use either `margin-top` or jquery `.animate()` to scroll down to a predefined `li`? thanks a lot – Fabrizio Bertoglio Mar 15 '18 at 11:03
  • Check this question for more information https://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin – Suresh Ponnukalai Mar 15 '18 at 11:07
  • 1
    actually this works with `.animate()` so this issue is solved. my project must have something that is blocking `.animate()` to scroll down .. thanks for the help .. I decided to accept your answer – Fabrizio Bertoglio Mar 15 '18 at 11:07