如何去除react-burger-menu创建的菜单中的滚动条？

针对你遇到的滚动条问题，结合现有CSS代码，可通过以下关键调整解决：

1. 修复无效CSS属性 #

你的.bm-menu-wrap中存在一行无效代码：padding-bottom: px;，未指定数值会被浏览器忽略，可能引发布局异常，建议删除该行或改为padding-bottom: 0;。

2. 控制列表容器的溢出行为 #

滚动条大概率来自.bm-item-list：你给它设置了固定高度height: 200px，同时添加了padding: 0.8em，默认盒模型下padding会额外增加元素总高度，导致内容溢出产生滚动条。可通过两种方式处理：

• 方式一：让内边距包含在高度内
  给.bm-item-list添加box-sizing: border-box，使padding被纳入设置的height范围，同时强制隐藏溢出内容：

.bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
    height: 200px;
    box-sizing: border-box;
    overflow: hidden;
}

• 方式二：转移内边距到菜单项
  将列表容器的padding移除，加到单个菜单项上，避免容器高度被padding撑开：

.bm-item-list {
    color: #b8b7ad;
    height: 200px;
    overflow: hidden;
}

.bm-item {
    display: inline-block;
    color: #d1d1d1;
    margin-bottom: 10px;
    text-align: left;
    text-decoration: none;
    transition: color 0.2s;
    cursor: pointer;
    padding: 0 0.8em;
}

3. 确保全层级容器禁用溢出 #

确认.bm-menu和.bm-menu-wrap的overflow: hidden属性生效，同时检查嵌套的header容器是否存在溢出设置影响，必要时给header也添加overflow: hidden（需确保不影响header其他内容展示）。

调整后滚动条即可消失，另外关于菜单偏移的问题，不建议用margin-top: -30px的硬编码方式，若后续有优化需求，可尝试调整.bm-menu-wrap的定位属性（你当前将其设为relative，默认应为fixed）来解决偏移。

内容的提问来源于stack exchange，提问作者Duncan Payne