antdesign吧 关注:10贴子:11
  • 4回复贴,共1

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

只看楼主收藏回复

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


IP属地:广东1楼2019-06-13 08:59回复
    参考效果:


    IP属地:广东3楼2019-06-13 09:35
    回复
      2025-05-29 23:30:02
      广告
      如果是antd pro的话,修改/src/components/SiderMenu/BaseMenu.js中Menu组件的
      style={{
      ...style,
      overflowY: 'scroll',
      maxHeight: '100vh'
      }}


      IP属地:福建9楼2020-02-17 16:53
      回复
        F12审查元素,找到左侧菜单对应的dom,一般都有class,然后再找到加载这个laout的css或者less,加上对应class 的overflow-y:auto,搞定,是不是很简单呢。


        IP属地:重庆10楼2020-04-16 12:32
        回复
          烦烦烦


          IP属地:福建11楼2022-09-15 11:11
          回复