15.02.2023, 01:38
Hi sunlite,
es gibt mehrere Wege wie du verhinderst, dass der Hintergrund scrollt. Natürlich schreibe ich dir die leichteste und sicherste Methode auf. Hier meine Lösung für dich -->
Ich hoffe damit zufriedenstellend deine Frage zu beantwortet zu haben.
VG
rzscout
es gibt mehrere Wege wie du verhinderst, dass der Hintergrund scrollt. Natürlich schreibe ich dir die leichteste und sicherste Methode auf. Hier meine Lösung für dich -->
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Scroll</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
body {
width: 100vw;
}
#overlay {
width: 100%;
height: 100vh;
box-sizing: border-box;
z-index: 100;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.75);
overflow: hidden;
}
.showOverlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.hideScroll {
position: fixed;
overflow: hidden;
}
main {
padding-top: 120px;
width: 100%;
height: 300vh;
box-sizing: border-box;
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
</style>
<script>
'use strict';
var overlay, closeButton, openButton;
document.addEventListener('DOMContentLoaded', function() {
overlay = document.getElementById('overlay');
closeButton = document.getElementById('close');
openButton = document.getElementById('open');
openButton.addEventListener("click", function(){
overlay.classList.remove('hide');
overlay.classList.add('showOverlay');
document.body.classList.add('hideScroll');
});
closeButton.addEventListener('click', function() {
overlay.classList.add('hide');
overlay.classList.remove('showOverlay');
document.body.classList.remove('hideScroll');
});
});
</script>
</head>
<body>
<div id="overlay" class="hide">
Hallo Welt
<button id="close">Overlay schließen</button>
</div>
<main>
<h3>Lorem ipsum</h3>
<button id="open">Overlay öffnen</button>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat fuga magnam sint, dolorum accusamus harum iure suscipit, veritatis incidunt blanditiis cumque debitis cupiditate porro cum facere, aspernatur dolores. Hic, aliquam!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat fuga magnam sint, dolorum accusamus harum iure suscipit, veritatis incidunt blanditiis cumque debitis cupiditate porro cum facere, aspernatur dolores. Hic, aliquam!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat fuga magnam sint, dolorum accusamus harum iure suscipit, veritatis incidunt blanditiis cumque debitis cupiditate porro cum facere, aspernatur dolores. Hic, aliquam!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat fuga magnam sint, dolorum accusamus harum iure suscipit, veritatis incidunt blanditiis cumque debitis cupiditate porro cum facere, aspernatur dolores. Hic, aliquam!</p>
</main>
</body>
</html>Ich hoffe damit zufriedenstellend deine Frage zu beantwortet zu haben.
VG
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 