左侧menu导航,设置overflow:scroll,设置高度,滚动滚轮然后鼠标向上或者向下移时鼠标会出现抖动...

  我这边使用的是Ant design插件搭建的项目,左侧菜单栏使用的是Menu组件,因为项目的需求是整个项目不能出现滚动条,但是左侧菜单栏又有很多,所以只能给左侧菜单设置滚动条 :如图

  按理说给一个盒子固定了高度以及设置了overflow:scroll后是没什么问题的,但是实际上是有问题的,每当你滚动鼠标然后鼠标向下或者向上移动时,menu菜单栏就会出现抖动的问题,有点像回到顶部或者会到底部的效果,刚开始一直以为是a标签自带的效果,然后又把 Link 改成了span,然而并不是……

  其实解决的方法需要用一个标签包裹着Menu标签,然后样式给外层的标签加,这样就不会出现抖动的问题了;如图

  去除滚动条的方法有很多种,这里附加一种比较简单有比较好用的方法,注意需要去除的加一个class名或者id名,不然整个项目的滚动条都会去了,代码如下:

.menu-dom::-webkit-scrollbar {display:none}

  整体的效果就是下面的了,如下图:

转载于:https://www.cnblogs.com/wantu/p/10329091.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值