<!DOCTYPE html>
<html>
<head>
<title>CUSTOM 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">Click Here</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>
I am creating a unique page layout with a sidebar and main content area. The main part should act like the body of the page without any issues. However, I encountered a problem when opening the sidebar which slides in from the left. This action causes the page to receive a vertical scrollbar which is unwanted. Despite trying various solutions, the issue persists. View the image showing the vertical scrollbar here.