创建具有滚动功能的UI菜单

是一种常见的前端开发需求，可以通过以下步骤来实现：

HTML结构：使用HTML标签创建菜单容器和菜单项。菜单容器可以使用 <div> 或 <ul> 标签，菜单项可以使用 <li> 标签。为了实现滚动功能，需要将菜单容器设置为固定高度，并为其添加 overflow: auto; 样式。

<div class="menu-container">
  <ul class="menu">
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
    <li>菜单项4</li>
    <li>菜单项5</li>
    <li>菜单项6</li>
    <li>菜单项7</li>
    <li>菜单项8</li>
    <li>菜单项9</li>
    <li>菜单项10</li>
  </ul>
</div>

CSS样式：为菜单容器和菜单项添加样式，使其呈现滚动效果。可以设置菜单容器的高度、宽度、背景颜色等样式，并为菜单项设置合适的间距和样式。

.menu-container {
  height: 200px;
  width: 200px;
  background-color: #f2f2f2;
  overflow: auto;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.menu li:last-child {
  border-bottom: none;
}

JavaScript交互：如果菜单项数量超过菜单容器的高度，需要通过JavaScript来实现滚动功能。可以监听菜单容器的滚动事件，并根据滚动位置来判断是否需要显示滚动条。

var menuContainer = document.querySelector('.menu-container');

menuContainer.addEventListener('scroll', function() {
  if (menuContainer.scrollTop > 0) {
    menuContainer.classList.add('scrolling');
  } else {
    menuContainer.classList.remove('scrolling');
  }
});