# 悬浮到菜单上莫名多出滚动条

* **抖音：**<https://v.douyin.com/UGMsjKP/>
* **B站：**<https://www.bilibili.com/video/BV1C14y1R78E/>

> 本期视频为小伙伴提供的demo及源码，不便开放

大看这页面现在滚动没有什么问题啊

菜单这边空白处也没有问题

但是呢注意

只要把鼠标放在这个菜单上

他就可以滚动的超出这个屏幕（大家看）

而且还有点抖

所以呢这个问题也好排查

我们就看一下是什么东西

把下边撑开了就可以

那为了方便调试呢

我们给任意一个菜单加上这个hover

选项模拟我们来悬浮的效果

然后呢

我们再看一下下边是被什么撑开了

我们用选中工具在这点一下

看看是一个button的::after

它这个after呢设置了一个100%的height

我们把这个height去掉看看它就可以了

那为什么设了这个height会有问题呢

其实原因是他设了这个position的absolute

一旦设了这个absolute的话呢

它就会去寻找它的父级元素

非static定位的这个元素

然后以它为基准

无论是位置啊还是大小

所以呢

它上层元素一直找一直找到了body

所以解决这个问题其实也简单

要么呢我们就不要给这设置100%的head

如果一定要设置的话呢

那我们就在button上去设置一个position

我们不在这哈

我们往下找那个button元素在这

我们给这个button加一个position

等于relative

好我们再来试一下啊

大家看这样就可以了


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/xuan-fu-dao-cai-dan-shang-mo-ming-duo-chu-gun-dong-tiao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
