HTML Scrollen deaktivieren wenn Modal Window offen ist

Question

Ich habe ein Modal Window in HTML. In dem Modal Window kann man scrollen aber wenn das Modal Window fertig gescrollt hat dann scrollt die ganze Seite im Hintergrund auch mit.

<div id="hitModal" class="modal" style="display:hidden">
    <div class="modal-content">
        <div class="modal-header">
            <span>Event Details</span>
            <span onclick="closeModal()" class="close">&times;</span>
        </div>
        <div class="modal-body">
            <pre id="hitJson"></pre>
        </div>
    </div>
</div>

Mit einer Javascript Funktion wird das geöffnet und geschlossen.

function showHitDetails(hitId) {
    fetch(`/hit/${hitId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById("hitJson").textContent = JSON.stringify(data, null, 4);
            document.getElementById("hitModal").style.display = "block";
        })
        .catch(error => console.error("Fehler beim Abrufen des Hits:", error));
}

function closeModal() {
    document.getElementById("hitModal").style.display = "none";
}

Wie kann ich machen das die Hauptseite nicht mitscrollt wenn man im Modal Window scrollt?

Answer 1

Erstelle eine Subklasse für den Body die nicht scrollbar ist.

body.modal-open {
    overflow: hidden; /* Verhindert das Scrollen */
}

Wenn du das Modal öffnest, füge dem Body der Seite die Klasse "modal-open" hinzu damit sie nicht mehr scrollbar ist.

function showHitDetails(hitId) {
    fetch(`/hit/${hitId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById("hitJson").textContent = JSON.stringify(data, null, 4);
            document.getElementById("hitModal").style.display = "block";

            document.body.classList.add("modal-open"); // Scroll deaktivieren 

        })
        .catch(error => console.error("Fehler beim Abrufen des Hits:", error));
}

function closeModal() {
    document.getElementById("hitModal").style.display = "none";
    
    document.body.classList.remove("modal-open"); // Scroll wieder aktivieren
}