Modernized Style - Additional Scrolling Feature for List Element

Question

Modernized Style - Additional Scrolling Feature for List Element

I've implemented code from Google's Material Design website for my project: https://material.io/components/web/catalog/lists/

Although it works well, the issue arises when more list entries are added and I have to scroll down to view them. The problem is that as I scroll through the list, I end up scrolling past my page header.

Is there a way to include a 'secondary scroll bar' (not sure if that's the correct term) that would specifically scroll through the list entries only?

An example of what I am aiming for can be seen here:

Thank you in advance for any help!

html css material-design

Answer 1

Answer №1

To limit the height of the list container, you can either cause a scroll bar to be shown or add a vertical scroll bar using the 'overflow-y' property.

Here is an 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>

Answer 2

To limit the height of the list container, you can either cause a scroll bar to be shown or add a vertical scroll bar using the 'overflow-y' property.

Here is an 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>

Modernized Style - Additional Scrolling Feature for List Element

Answer №1

Similar questions

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Using PHP and jQuery to output content in HTML

Guide to setting up a custom js file in Laravel admin template

What is causing my AJAX Contact Form to navigate away from the original page?

Updating checkbox Icon in Yii2

Unique background image is assigned to each div sharing the same class

How to Prevent Scrolling When Modal is in Use on Full Page JS

Ways to Activate a Modal Using a Hyperlink

Syncing Highchart's Month Setting with Database Records

Show only a cropped section of a resized image within a div

What is the best way to send variables through an HTTP post from a JavaScript function in one file to a separate Python function in a different location?

Choosing various li classes within a navigation bar

Performing code execution in MVC 5 View every 1 second

Sharing data with external domains and retrieving HTML output using JavaScript

Implement a maximum height restriction on the children of the Select component in Material-UI

The deletion by index feature seems to be malfunctioning in Angular

adjust the dimensions of the clickable icon's background

What methods can be used to test scss subclasses within an Angular environment?

Implement a default dropdown menu that displays the current month using Angular and TypeScript

What is the best way to align a container in the middle of the page without positioning the text in the center