Creating HTML dynamic lists that remain fixed to the bottom of the viewport, regardless of any changes in their content

Question

Creating HTML dynamic lists that remain fixed to the bottom of the viewport, regardless of any changes in their content

I want to create a dynamic list that displays 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 vary as new items are added.

The requirement is for the list to stay anchored to the bottom of the viewport, even with new items being added.

This means the list should not start at the top and scroll down using JS/TS; it needs to render from the bottom up.

Is there a way to achieve this using only layout / CSS, or do we need to implement something in JS/TS to auto-scroll to the latest item?

Please advise -- thank you!

Before anyone mentions -- that solution is not suitable due to accessibility (a11y) reasons; it's vital for the source order to match the reading order of the page.

javascript html css reactjs typescript

Answer 1

Answer №1

If the solution provided in the linked answer aligns with your goal, you may find a helpful tip on avoiding the need to reverse the content.

Does this approach meet your needs?

.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>

Answer 2

If the solution provided in the linked answer aligns with your goal, you may find a helpful tip on avoiding the need to reverse the content.

Does this approach meet your needs?

.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>

Creating HTML dynamic lists that remain fixed to the bottom of the viewport, regardless of any changes in their content

Answer №1

Similar questions

Tips for creating CSS from the Google Chrome inspector for future use

Removing selected options from multiple select boxes in AngularJS using ng-repeat

Is there a way to transfer PHP user information (session) to a Node.js server?

Achieving alignment of items within nested Grid components in React Material UI

Best practices for integrating text and images within a website header using CSS and HTML

Utilize React Link to redirect to a proxied backend server

The table does not move up or down when using the mousewheel over the rows, but only when

Animate the Collade object's position gradually in ThreeJS

What is the best way to link function calls together dynamically using RXJS?

Struggling with implementing the group by feature in AngularJS?

Designing a mobile user interface for time intervals

Show only the results that have identifiers matching the parameter in the URL

Press the vertical navigation bar

There seems to be an issue with Affix functionality in Bootstrap 4 (alpha version)

Challenges arise when dealing with an excessive amount of nested POJO structures

In vue.js, when utilizing the select all method for checkboxes, it is important to ensure that disabled checkboxes are not

CAUTION: cleaning unsecure style value background-color

Combining two sets of x-data within a single div

Typescript library available as a private npm dependency

Troubleshooting a Pulumi script in Azure using Typescript and encountering difficulties with function writing