如何在 html 中制作可滚动列表

在开发网站时，经常需要呈现大量信息的列表，如果列表过长，就必须使用可滚动列表。在 HTML 中，有多种方法可以实现可滚动列表，下面将介绍其中几种方法。

使用 CSS overflow 属性

CSS 的 overflow 属性可以控制元素的溢出内容如何处理，将 overflow 属性设置为 scroll 或 auto 可以让元素出现滚动条。如下所示：

<div style="height: 200px; overflow: auto;">
  <ul>
    <!-- 列表内容 -->
  </ul>
</div>

上面的代码中，div 元素的高度为 200px，overflow 属性设置为 auto，表示只在必要时出现滚动条。ul 元素包含列表的内容。需要注意的是，如果直接把 overflow 属性设置在 ul 元素上，可能会出现一些问题，比如滚动条不出现等。因此建议使用 div 等容器元素来包含列表。

使用 CSS max-height 属性

CSS 的 max-height 属性可以限制元素的最大高度，超出部分会自动显示滚动条。如下所示：

<div style="max-height: 200px; overflow: auto;">
  <ul>
    <!-- 列表内容 -->
  </ul>
</div>

上面的代码中，div 元素的最大高度为 200px，如果列表内容超过了这个高度，就会自动生成滚动条。需要注意的是，这种方法无法控制滚动条的位置，也就是说，滚动条始终是在最右侧。

使用 JavaScript scrollTop 属性

JavaScript 的 scrollTop 属性可以控制元素的滚动位置。通过监听滚动事件，可以动态地改变滚动位置，从而实现可滚动列表。如下所示：

<div id="list" style="height: 200px; overflow: auto;">
  <ul>
    <!-- 列表内容 -->
  </ul>
</div>
<script>
  var list = document.getElementById('list');
  list.addEventListener('scroll', function() {
    // 获取滚动位置
    var scrollTop = list.scrollTop;
    // 处理滚动位置
    // ...
  });
</script>

上面的代码中，div 元素的高度为 200px，overflow 属性设置为 auto，同时为元素添加了一个 id 属性，方便在 JavaScript 中进行操作。通过监听 scroll 事件，可以获取到元素的滚动位置，然后可以根据需要进行处理。但是这种方法比较麻烦，需要编写大量的 JavaScript 代码，也不太适合初学者。