Javascript 如何防止汉堡包菜单边栏使大小溢出？

我在右边有一个类似汉堡包的菜单，可以将边栏从右向左移动，就像这张幻灯片一样

问题是侧边栏虽然是隐藏的（在单击菜单之前），但它占用了额外的空间，当它出来时，额外的空间已经被侧边栏占用了

看起来body标签被侧边栏强制扩展，这不是我的意图

我希望侧边栏出现在右侧的边缘，而不是隐藏时占用额外的空间，并在出现时占用该空间

下面是我的代码：

const Sidebar = styled.div<SidebarProps>`
  position: absolute;
  background: rgb(65, 65, 65);
  top: 3.6rem;
  right: 0;
  border: 1px solid red;
  width: 19.2rem;
  height: 100%;
  z-index: 99;
  padding: 2.65rem 1.4rem;
  overflow-y: hidden;
  transform: ${(props) =>
    props.slideOn ? "translateX(0)" : "translateX(100%)"};
  transition: transform 0.3s ease-in-out;
  opacity: ${(props) => (props.slideOn ? 1 : 0)};
`;

const侧栏=styled.div`
位置：绝对位置；
背景：rgb（65,65,65）；
顶部：3.6雷姆；
右：0；
边框：1px纯红；
宽度：19.2rem；
身高：100%；
z指数：99；
填充物：2.65雷姆1.4雷姆；
溢出y：隐藏；
转换：${（道具）=>
props.slideOn？“translateX（0）”：“translateX（100%）”}；
转换：转换0.3s轻松输入输出；
不透明度：${（props）=>（props.slideOn？1:0）}；
`;

---

提前感谢。

这可能是一种愚蠢的方法，但您能否将容器的宽度设置为如下值：

container {
    max-width: 100vw;
    overflow-x: hidden;
}

---

嗯，我想这对你有用。 这是一种跟随的方式

.container {
  display: none;
  overflow-x: hidden;
}