CODEWITHSUNDEEP
htmlcssmaterial-design
Ben10
Ben10

Reputation: 498

Material Design - Secondary Scroll Bar for List Component

In my project I'm using the code from google's material design website: https://material.io/components/web/catalog/lists/

It work great, however, as more list entries are added I have to scroll down to see them. The problem is that to scroll through the list, I am scrolling past my page header.

I'm asking if anyone knows how to add a 'secondary scroll bar' (I don't know what you call them) that when used only scrolls through the list.

An example of what I'm trying to achieve is here: https://stackoverflow.com/a/21998914/8625593

Thanks in advance!

Upvotes: 0

Views: 2093

Answers (1)

Ben. L.
Ben. L.

Reputation: 28

Limit the height on the list container. It will cause a scroll bar to be shown or add a scroll vertical scroll bar with the property 'over-flow-y'.

For example:

#listContainer{
  max-height:200px; 
  width:18%;
  overflow:hidden;
  overflow-y:scroll;
}

#container {
  overflow-y:scroll
}
<div>
  <h1>Headline</h1>
  <div id="container">
    <ul id="listContainer">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li> 
      <li>Link 7</li> 
      <li>Link 8</li>
      <li>Link 9</li>
      <li>Link 10</li>
      <li>Link 11</li>
      <li>Link 12</li>
      <li>Link 13</li>
      <li>Link 14</li>
      <li>Link 15</li>
      <li>Link 16</li>
      <li>Link 17</li>
      <li>Link 18</li>
      <li>Link 19</li>
      <li>Link 20</li>
    </ul>
  </div>

  <div>Possible Summary Information</div>
</div>

Upvotes: 1

Related Questions