我正在try 使用html、css和js制作一个汉堡菜单滑入/滑出动画，但侧边栏的起点在屏幕外(和html正文之外)，这会留下一个水平滚动.我试着不用‘位置:绝对’，但它似乎不起作用.
以下是这个问题的一张图片:
动画幻灯片运行得很好，问题是这个水平滚动.还有:我不知道为什么滑出动画不起作用.
function hamburguer_menu() {
const botao_hamburguer = document.querySelector('#botao_hamburguer')
const sidebar = document.querySelector('.sidebar')
if (sidebar.style.opacity == 0) {
sidebar.style.opacity = 1
sidebar.style.translate = '0'
sidebar.style.transition = 'translate ease-in 0.5s'
} else {
sidebar.style.opacity = 0
sidebar.style.translate = '100%'
sidebar.style.transition = 'translate ease-in 0.5s'
}
}html,
body {
min-height: 100dvh;
max-width: 100dvw;
padding: 0;
margin: 0;
}
#layout_bar {
background-color: black;
height: var(--heading_height);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: #000000a1 1px 0px 9px 0px;
}
.botao_hamburguer {
background-color: pink; /* transparent; */
border: none;
z-index: 2;
}
.sidebar {
opacity: 0;
transition: translate ease-in 0.5s;
text-align: center;
margin: 0;
padding: 0;
right: 0%;
z-index: 1;
position: absolute;
translate: 100%;
top: 0%;
background-color: rgb(27, 27, 27);
color: white;
width: 300px;
min-height: 100dvh;
}<body>
<!-- script src="/static/fit/js.js"></script -->
<heading id="layout_bar">
<h1 id="logo"><a href=""><span class="bigger">B</span>e<span class="bigger">B</span>etter</a></h1>
<button type="button" onclick="hamburguer_menu()" id="botao_hamburguer" class="botao_hamburguer">
<span class="material-symbols-outlined icon-branco">menu</span>
<span class="material-symbols-outlined icon-branco" style="display: none;"></span>
</button>
</heading>
<aside class="sidebar">
<ul style="list-style-type: none;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</aside>
</body>