如何实现antd官方文档左侧菜单栏hover滚动条效果？

Question

问题描述

想实现antd官网文档左侧菜单栏的效果，
不hover时：
隐藏菜单栏滚动条。

hover时：

1. 如果菜单项目加起来的高度不超过视口高度，不会自动出现滚动条。
2. 如果菜单项目过多，会自动出现滚动条，且菜单项目宽度会相应减去滚动条宽度。

点击这里参考链接，注意观察左侧菜单栏。

问题出现的环境背景及自己尝试过哪些方法

1. 尝试过查看antd Layout、Menu、Sider组件用法，组合使用，但是没有找到能实现该效果的API或调用方法。
2. 想过另一种替代的实现思路：隐藏纵向滚动条，然后在菜单栏加一个高度相同的空div，该div绝对定位，right：0;在hover时再显示出来。但是这种实现方法没有问题描述中hover时第2点的效果，且不够优雅。

期望各位大神找到能实现这种效果的方式，并指点相关原理，Thanks♪(･ω･)ﾉ

Answer 1

别想那么复杂，这就是一个简单的css效果
1.设置一个menu的盒子，宽度100%
2.menu盒子外设置一个大盒子，默认时候overflow设置为hidden，宽度高度自己设置
3.给大盒子添加一个hover伪类，改变overflow-y的属性为auto
然后你就发现可以了

Answer 2

楼主实现啦 能出一个教程吗 我始终都达不到你说的那两点效果