Scrolling deaktivieren, aber Bildlaufleiste behalten CSS

Question

Ich kann keine Lösung finden, hier gab es eine Frage, aber die Antworten sind nicht sehr brauchbar (zumindest für mich).

Ich habe ein modales JavaScript-Pop-up, das alles im Hintergrund deaktiviert, indem es transparent div über die Seite platziert. Es deaktiviert auch das Scrollen, indem der Überlauf auf "Versteckt" gesetzt wird, und muss dies tun, da die Seite ansonsten mit dem Mausrad gescrollt werden kann und den Benutzer ablenkt.

Das Problem ist, wenn die Bildlaufleiste ausgeblendet und angezeigt wird die Größe der Seite geändert und der Effekt ist hässlich. Außerdem ist meine Seite so gestaltet, dass es auch hässlich wäre, wenn ich die Größenänderung abbringe.

Ich möchte die Bildlaufleiste deaktivieren, aber es sichtbar (der Seiteninhalt ist länger als der Bildschirm passt). Ist das irgendwie in CSS möglich?

Answer 1

Anstatt die css zu ändern, die die scrollbar entfernt, und wie Sie das Layout der Seite ändern, versuchen Sie stattdessen eine jquery function aufrufen.

// call your pop up and inside that function add below 
$('body').on('scroll mousewheel touchmove', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
}); 

dann, wenn Sie die modale schließen, rufen die gleiche Funktion aber ersetzen on mit off

Answer 2

Sobald Sie anfangen, Ihr Popup anzuzeigen, geben Sie body eine Klasse (wie popupOpen). Dies sollte eine einfache Problemumgehung sein.

.popupOpen { 
    overflow: hidden; 
    margin-right: 17px //size of the scrollbar in each browser 
} 

Wenn Sie Ihre Pop-up schließen, entfernen Sie einfach die Klasse aus dem body.