javascript - 向右滑动而不是平稳滑动时，右侧div会弹出

因此，我试图创建一个滑出菜单，该菜单最初位于其左边缘的负百分比处，当我单击一个按钮时，它可以从左向右滑出，这是我能够做到的。但是，我希望我的幻灯片菜单在滑出时也将主页div推到右侧。幻灯片菜单确实将div推到左侧，这是我可以通过给主页div赋予绝对位置来实现的。但是，问题在于，当我单击菜单切换开关以将幻灯片菜单向右关闭时，首页div会迅速弹出，然后跟随幻灯片菜单向右滑动，而不仅仅是顺着菜单幻灯片菜单。

另外，当菜单从左向右滑出时，我会得到不需要的垂直和水平滚动条。我尝试通过在父元素上应用“溢出x”来修复它，但并不能解决问题。有人帮忙吗？

我试图在这里寻找类似的问题，但找不到任何可以帮助我解决问题的方法。

这是我目前拥有的：

document.getElementById('toggler').onclick = function(){
  document.getElementById('side-bar').classList.toggle('active');
  document.getElementById('Right-Page').classList.toggle('active');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-family: 'Lora', serif;
  }

#side-bar{
  width: 60%;
  height: 100vh;
  background-color: black;
  display: inline-block;
  margin-left: -60.5%;
  transition: all 0.6s ease;
  vertical-align: top;
}

#side-bar.active {
  margin-left: 0%;
}

#side-bar ul {
  list-style: none;
}

#side-bar ul li {
  margin-top: 15px;
  margin-left: 20px;
  float: left;
}

#side-bar ul a {
  text-decoration: none;
  color: white;
}

#side-bar ul li:hover {
 border-bottom: solid 1px #ffffff;
}

#Right-Page {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100vh;
  background-color: red;
}

#Right-Page.active{
  position: absolute;
}

#toggler{
  margin-top: 8px;
}

#toggler span{
  background-color: #000000;
  width: 35px;
  height: 4px;
  display: block;
  margin-bottom: 5px;
  margin-left: 10px;
}

<!Doctype html>
    <html lang="en">
    <head>
        <title>Side Bar</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Lora"
     rel="stylesheet">
    </head>
    <body>
        <div id="main-container">
            <div id="side-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
            <div id="Right-Page">
                 <div id="toggler">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div id="main-text">

                </div>
            </div>
        </div>

    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

最佳答案

您的position:absolute仅适用于#Right-Page.active。它并非绝对位于后退位置，因此不会滑动。

将position:absolute移到主要的#Right-Page样式中，它应该可以按照您想要的方式工作。

关于javascript - 向右滑动而不是平稳滑动时，右侧div会弹出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47026873/