Beiträge: 10
Themen: 3
Registriert seit: Feb 2023
Bewertung:
0
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:
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>
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung:
14
Kannst du bei codepen.io mal ein laufendes Beispiel erzeugen?
deine Erklärung verstehe ich auch noch nicht so ganz , da könnte ein laufendes Beispiel schon etwas mehr helfen
Beiträge: 10
Themen: 3
Registriert seit: Feb 2023
Bewertung:
0
Hi lieber Admin, hi liebe Community,
ich habe gerade ganz billig versucht, bei codepen.io mein Problemchen darzustellen. Dafür habe ich die Codeschnipsel aus meinem Projekt stark zurechtgeschnitten.
Hier der Link:
https://codepen.io/blue_sunlite/pen/VwGw...itors=1100
Wenn Ihr auf den Namen "Suche" rechts oben im Eck klickt, legt sich das schwarz-transparente Overlay über den Text. Scrollt Ihr nun aber mit dem mittleren Mausrad, dann bewegt sich der Text im Hintergrund rauf und runter. Dieser Text soll aber nicht bewegbar sein, solange das Overlay geöffnet ist. Erst, wenn Ihr auf das "X" klickt und das Overlay verschwindet, dann soll der Text im Hintergrund wieder bewegbar sein.
Dafür benötige ich ein Javascript. Nur funktionieren meine Javascript-Ideen nicht.
Ich hoffe, Euch hilft diese Erklärung/Darstellung etwas besser, um zu verstehen, was ich vorhabe.
Vielen Dank
Beste Grüße
Beiträge: 306
Themen: 14
Registriert seit: Jun 2022
Bewertung:
26
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 -->
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" 
Beiträge: 10
Themen: 3
Registriert seit: Feb 2023
Bewertung:
0
@RZScout
Das ist genau das, was ich gesucht habe. So funktioniert das super.
Vielen Dank
Beste Grüße
|
