Question

我无法用我的代码解决问题。我正在使用右侧的滑入式导航面板。但是，当面板从其活动状态以其非活动状态被触发时，主体会绕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的给定笔中，它可以完美地适用于移动设备和台式机

Answer 1

由于菜单和切换按钮的位置是绝对的，因此父容器必须包含position: relative：

.body{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

请注意，我已经在代码笔中添加了代码，以确保菜单的高度符合预期：

https://codepen.io/anon/pen/NVmPzy

现在应该可以在移动设备上使用了。

导航栏中溢出主体的（右）幻灯片问题

1 个答案: