HTML box with inside a list of element

Question

I am working on an HTML project and I want to insert inside a page a box which inside has a list of element that scrolls within the box, without scrolling the page.

Is it possible to do that?

What I have now is simply a div that contains a list dynamically filled with a javascript code. I want to put the list in something like a section so the list is scrolled within the section — Andrea Foderaro, Sep 17 '18 at 17:40
you can do that by giving `max-height` to div and `overflow:scroll`. But it is just a highlevel idea. — Shubham Yerawar, Sep 17 '18 at 17:43

score 0 · Accepted Answer · answered Sep 17 '18 at 17:47

Add .scrollable-ul class to your ul element and pick some height for it in CSS. Scroll is added via overflow-y: auto.

.scrollable-ul { overflow-y: auto; height: 60px; }

<ul class="scrollable-ul">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<ul>

HTML box with inside a list of element

1 Answers1