悬浮到菜单上莫名多出滚动条
本期视频为小伙伴提供的demo及源码，不便开放
大看这页面现在滚动没有什么问题啊
菜单这边空白处也没有问题
但是呢注意
只要把鼠标放在这个菜单上
他就可以滚动的超出这个屏幕（大家看）
而且还有点抖
所以呢这个问题也好排查
我们就看一下是什么东西
把下边撑开了就可以
那为了方便调试呢
我们给任意一个菜单加上这个hover
选项模拟我们来悬浮的效果
然后呢
我们再看一下下边是被什么撑开了
我们用选中工具在这点一下
看看是一个button的::after
它这个after呢设置了一个100%的height
我们把这个height去掉看看它就可以了
那为什么设了这个height会有问题呢
其实原因是他设了这个position的absolute
一旦设了这个absolute的话呢
它就会去寻找它的父级元素
非static定位的这个元素
然后以它为基准
无论是位置啊还是大小
所以呢
它上层元素一直找一直找到了body
所以解决这个问题其实也简单
要么呢我们就不要给这设置100%的head
如果一定要设置的话呢
那我们就在button上去设置一个position
我们不在这哈
我们往下找那个button元素在这
我们给这个button加一个position
等于relative
好我们再来试一下啊
大家看这样就可以了
最后更新于