Set the dropdown menu as a scrolling effect

Setting the drop-down menu as a scrolling effect requires the following steps:

1. Sets the height of the dropdown menu container.

.el-dropdown-menu {
  max-height: 200px; /*设置菜单高度为200px*/
  overflow-y: auto; /*设置滚动条*/
}

.

1. Add content inside the dropdown menu container and make it exceed the height of the container.

<div class="el-dropdown-menu">
  <ul>
    <!-- 这里添加下拉菜单内容 -->
  </ul>
</div>

1. Customize the style of the scrollbar.

 

.el-dropdown-menu::-webkit-scrollbar {
  width: 6px; /*滚动条宽度*/
}

.el-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /*滚动条颜色*/
  border-radius: 5px; /*滚动条边角弧度*/
}

The above are the basic steps to set the drop-down menu as a scrolling effect. You can adjust the width, color, corner radian and other styles of the scroll bar according to actual needs to achieve a more personalized effect.

It should be noted that the scroll bar will only be displayed when the content of the drop-down menu exceeds the height of the container. If it does not exceed the height, the scroll bar will not be displayed. Also, in some browsers, the scrollbars may not work and you need to change the style of the scrollbars or use other solutions to solve the problem.