madeas,
зачем ползунок скролла на начальном экране, если "скролла нет"? overflow: hidden; надо ставить на body, а не на #overlay
возможный вариант
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html, body {
height: 100%;
}
#overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(73deg, #3369E7, #47c9e5);
z-index: 100;
}
.info button {
border: 2px solid #fff;
background: transparent;
color: #fff;
font-weight: bold;
padding: 1em 2em;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
margin: 1em auto;
opacity: 0.7;
outline: none;
-webkit-appearance: button;
cursor: pointer;
}
.info button:hover {
opacity: 1;
}
body.overlay {
overflow: hidden;
}
body.overlay #overlay{
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.info button').addEventListener("click",
function() {
document.body.classList.remove("overlay")
} );
});
</script>
</head>
<body class="en overlay">
<div id="overlay"><div class="info"><button type="button">get started!</button></div></div>
</body>
</html>