02.02.2023, 11:08
Hallo liebe Java-Community,
ich bin ein absoluter Neuling in Sachen Javascript und stehe gleich am Anfang vor einem kleinen Problem. Ich arbeite an einer Seite, die ab einer Breite von 700px bei einem Klick auf einen a-Tag ein Overlay öffnet. Was ich nun gerne erreichen würde, ist, den body im Hintergrund nicht mehr scrollbar zu machen - und zwar ohne JQuery und Co, sondern nur reines Javascript.
Meine Überlegung war, dass beim Klick auf den a-Tag die CSS-Body-Klasse "body{}" mit der Klasse "body-overlay{}" überschrieben wird. Beim Klick auf den a-Tag "overlayschliessen" soll das Overlay wieder verschwinden und der body wieder scrollbar sein. Mein Ansatz funktioniert leider nicht. Hat jemand von Euch eine Idee?
Vielen Dank
Das ist mein "stark vereinfachtes" Script so weit:
ich bin ein absoluter Neuling in Sachen Javascript und stehe gleich am Anfang vor einem kleinen Problem. Ich arbeite an einer Seite, die ab einer Breite von 700px bei einem Klick auf einen a-Tag ein Overlay öffnet. Was ich nun gerne erreichen würde, ist, den body im Hintergrund nicht mehr scrollbar zu machen - und zwar ohne JQuery und Co, sondern nur reines Javascript.
Meine Überlegung war, dass beim Klick auf den a-Tag die CSS-Body-Klasse "body{}" mit der Klasse "body-overlay{}" überschrieben wird. Beim Klick auf den a-Tag "overlayschliessen" soll das Overlay wieder verschwinden und der body wieder scrollbar sein. Mein Ansatz funktioniert leider nicht. Hat jemand von Euch eine Idee?
Vielen Dank
Das ist mein "stark vereinfachtes" Script so weit:
Code:
<html>
<head>
<style>
body{
margin:0;
padding:0;
float:left;
width:100%;
}
@media only screen and (max-width : 700px) {
#body-overlay{
overflow:hidden;
}
}
</style>
</head>
<body>
<!-- Der Button -->
<a id="suchebuttonforoverlay" rel="noopener" href="#searchover"><img src="/images/md_suchbutton_mobile.svg" width="60" height="60"
title="Suche" alt="Suche" /></a>
<!-- Das Overlay mit Schließbutton -->
<div id="suchcontaineroverlay">
<a class="overlayschließen" href="#"></a>
...
</div>
</body>
<script>
var btn = document.getElementById('suchebuttonforoverlay');
var box = document.getElementById('suchcontaineroverlay');
btn.addEventListener('click', function() {
box.classList.remove('body');
box.classList.add('body-overlay');
});
</script>