<!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>
我想要有侧边栏和主要部分的页面。我想让主要部分像 body 一样，我对此没有问题。当我打开侧边栏时，问题就出现了。我想从左边滑入，我做到了。问题是当我打开侧边栏时，我的页面收到高度滚动条。我不想要它。我尝试了几件事，但没有任何效果。 Here you can see the vertical scrollbar
最佳答案
从#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 接收滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53268181/