Question

<!DOCTYPE html>
<html>
<head>
        <title>TEST PAGE</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <script
  src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
  <style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    #side{
      width: 20%;
      height: 100%;
      left: -20%;
      position: fixed;
      background-color: darkgreen;
      transition: 0.7s;
    }
    #main{
      width: 100vw;
      max-width: 100%;
      max-height: 100%;
      height: 100vh;
      background-color: red;
      transition: 0.7s;
    }
    #menu{
      width: 100%;
      height: 10%;
      background-color: grey;
    }
  </style>
</head>
<body>
    <div id="side"><button id="close">close</button></div>
  <div id="main"><div id="menu"><button id="open">Open</button></div></div>
  <script type="text/javascript">
    $("#open").on("click", function(){
      $("#side").css("left", "+=0%");
      $("#main").css("margin-left","+=20%");
    });
    $("#close").on("click", function(){
      $("#side").css("left", "-=20%");
      $("#main").css("margin-left","+=0%");
    });
  </script>
</body>
</html>

我想要一个带有侧栏和主要部分的页面。我想使主体像身体一样，对此我没有任何问题。打开侧边栏时出现问题。我想从左滑动，然后就滑了。问题是，当我打开侧栏时，页面会收到高度滚动条。我不要我尝试了几件事，但没有任何效果。 Here you can see the vertical scrollbar

Answer 1

从#main ID中删除width: 100vw;

#main{
 /* width: 100vw; Delete this */
    max-width: 100%;
    max-height: 100%;
    height: 100vh;
    background-color: red;
    transition: 0.7s;
}

检查Here，如果有帮助，请告诉我！

更改属性上的jQuery CSS接收滚动条

1 个答案: