问题描述
想实现antd官网文档左侧菜单栏的效果,hover时:
如果菜单项目加起来的高度不超过视口高度,不会自动出现滚动条。
如果菜单项目过多,会自动出现滚动条,且菜单项目宽度会相应减去滚动条宽度。
点击这里参考链接,注意观察左侧菜单栏。
问题出现的环境背景及自己尝试过哪些方法
尝试过查看antd Layout、Menu、Sider组件用法,组合使用,但是没有找到能实现该效果的API或调用方法。
想过另一种替代的实现思路:隐藏纵向滚动条,然后在菜单栏加一个高度相同的空div,该div绝对定位,right:0;在hover时再显示出来。但是这种实现方法没有问题描述中第2点的效果,且不够优雅。
期望各位大神找到能实现这种效果的方式,并指点相关原理,Thanks♪(・ω・)ノ
想实现antd官网文档左侧菜单栏的效果,hover时:
如果菜单项目加起来的高度不超过视口高度,不会自动出现滚动条。
如果菜单项目过多,会自动出现滚动条,且菜单项目宽度会相应减去滚动条宽度。
点击这里参考链接,注意观察左侧菜单栏。
问题出现的环境背景及自己尝试过哪些方法
尝试过查看antd Layout、Menu、Sider组件用法,组合使用,但是没有找到能实现该效果的API或调用方法。
想过另一种替代的实现思路:隐藏纵向滚动条,然后在菜单栏加一个高度相同的空div,该div绝对定位,right:0;在hover时再显示出来。但是这种实现方法没有问题描述中第2点的效果,且不够优雅。
期望各位大神找到能实现这种效果的方式,并指点相关原理,Thanks♪(・ω・)ノ