我无法用我的代码解决问题。我正在使用右侧的滑入式导航面板。但是,当面板从其活动状态以其非活动状态被触发时,主体会绕x轴溢出。
这是我编写的代码
$(document).ready(function(){
$('.toggle').click(function(){
$('.menu').toggleClass('active')
})
})
body{
margin:0;
padding:0;
overflow-x: hidden;
}
.menu, .toggle{
position:absolute;
}
.menu{
top:0;
bottom:0;
right:-300px;
width:300px;
background:green;
transition:.22s;
}
.menu.active{
right:0;
}
.toggle{
top:0;
left:0;
width:50px;
height:50px;
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<div class="toggle"></div>
codepen:https://codepen.io/ayushgx/pen/mYgyJe
我已经在我的代码中尝试过overflow-x: hidden
,但似乎无法正常工作。
我也已经找到了一支笔,他已经在代码中做过的一切,但是对我没有任何帮助
这是笔: https://codepen.io/erikterwan/pen/grOZxx
我不知道我是否错过了某事
因为该代码在桌面浏览器中可以正常运行,但在移动浏览器中不能运行。 但是在erikterwan的给定笔中,它可以完美地适用于移动设备和台式机
答案 0 :(得分:0)
由于菜单和切换按钮的位置是绝对的,因此父容器必须包含position: relative
:
.body{
position: relative;
min-height: 100%;
overflow: hidden;
}
请注意,我已经在代码笔中添加了代码,以确保菜单的高度符合预期:
https://codepen.io/anon/pen/NVmPzy
现在应该可以在移动设备上使用了。