Scrollable List in HTML

If you have a large list of items, you can display them as the user scrolls. One common requirement is to display a large amount of content within a limited space, such as a list of items or data entries. To tackle this challenge, HTML offers an elegant solution known as a “scrollable list.” So, in this article, we will see how to scrollable a list in HTML.

What is the Scrollable List?

The scrollable list allows users to view and interact with a list of items that exceed the available space on a webpage or within a container. We can enable users to scroll through the list vertically or horizontally to access additional content that is not immediately visible. It is commonly used for displaying various types of content, such as menus, navigation options, product listings, news articles, comments, etc.

How to create a scrollable list?

You can use CSS to set a fixed height for the container and apply the appropriate overflow property, such as “overflow” for both vertical and horizontal scrolling “overflow-y” for vertical scrolling, or “overflow-x” for horizontal scrolling.

Steps by step to create a Scrollable list

1. Create your lists inside an HTML <div> tag and set classname to ‘scrollable‘.
2. Select the class ‘scrollable’ in CSS using the class selector. Set the height and width using CSS ‘height’, and ‘width’ properties. If we don’t set fixed height and width we can’t create a scrollable list.
3. And set the ‘overflow‘ property to ‘auto‘ or ‘scroll‘ for containing div.

If you give a value of auto, they will do vertical scrolling or horizontal scrolling or both vertical and horizontal scrolling depending on the text length in the list item. For example:  If your list item text length is too long then horizontal scrolling or if the list item is too long then vertical scrolling or if both are too long then both vertical and horizontal scrolling. So instead of using the ‘scroll’ value, it is better if you use the ‘auto’ value instead

Example:

HTML:

<div class="scrollable">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <!-- Add more list items as needed -->
  </ul>
</div>

CSS:

.scrollable {
  overflow: auto;
  height: 120px;
  width: 150px;
}

Live preview:

See the Pen
scrollable list by Wonderdevelop (@wonderdevelop)
on CodePen.

In this above example, we have created a <div> tag and inside it the unordered list with 7 list items using <ul> and <li> tags. Then we set height to ‘120px’ and width to ‘150 To make the scrollable list we need to set the CSS ‘overflow’ property to ‘auto’.  Here we have given the value auto, the number of lists is too much, and the length of a list item is too small so only vertical scrolling is done.