0

I'm trying to make a dynamic list that looks something like this -

  <div class="list-wrapper">
    <ul class="list">
      <li class="list-item"> ... </li>
      <li class="list-item"> ... </li>
      ...
      <li class="list-item"> ... </li>
    </ul>
  </div>

The number of list items will change; new items will be appended to the list.

The list needs to stay scrolled / anchored to the bottom of the viewport, even as new items are added.

  • i.e., the list shouldn't render starting at the top and scroll to the bottom via JS/TS; it should render from the bottom up

Is there a way to do that solely via layout / CSS, or will we need to do something in JS/TS that forces a scroll to the new list item / child?

Please let me know -- thanks!

inb4 https://stackoverflow.com/a/44051405/3719053 -- that solution can't work due to accessibility (a11y) reasons; the source order must follow the reading order of a given page.

numonium
  • 131
  • 2
  • 7

1 Answers1

0

If the answer you linked to is what you want to achieve, there is a comment saying how to get around needing to reverse the content.

Is this what you want?

.list-wrapper {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  width: 50%;
  height: 4em;
  overflow: auto;
  border: 1px dashed;
}

.list-wrapper ul {
  margin: 0;
  padding: 0;
}

.list-wrapper li:nth-of-type(even) {
  background-color: silver;
}
<div class="list-wrapper">
  <ul>
    <li> One </li>
    <li> Two </li>
    <li> Three </li>
    <li> Four </li>
    <li> Five </li>
    <li> Six </li>
    <li> Seven </li>
    <li> Eight </li>
    <li> Nine </li>
    <li> Ten </li>
  </ul>
</div>
Tim R
  • 2,622
  • 1
  • 3
  • 19
  • Thanks -- a couple issues, though - this needs to be full-height, so `100vh`. this does cause some of the contents to get cut-off, especially if the window is resized to smaller than initial - doesn't stay at the bottom of the page when new items are appended it **is** close, though, so maybe a few tweaks (i.e., "the right two lines of css") would close the gap – numonium Jul 10 '23 at 19:59