Scrollen im Hintergrund beim Anzeigen von Popups verhindern

Lesezeit: 4 Minuten

Benutzer-Avatar
Jo

Ich habe ein Formular, das in einem Popup angezeigt wird. Nach dem Laden ist der Hintergrund ausgegraut, aber der Benutzer kann den Hintergrundinhalt immer noch nach oben und unten scrollen.

Wie verhindere ich, dass der Hintergrund scrollt?

Beispiel hier

den Link „Dieses Angebot per E-Mail versenden“ rechts neben dem PDF-Screenshot.

Benutzer-Avatar
sudAnsu63

Zum Ausblenden der Bildlaufleiste des Körpers beim Öffnen des Popups

document.body.style.overflow = "hidden";

und um beim Schließen des Popups zurückzukehren

document.body.style.overflow = "visible";

  • Die Zuweisung von Überlauf ausgeblendet bewirkt, dass die Bildlaufleiste verschwindet, wodurch sich die Seitenbreite ändert. Dadurch wird die Bildlaufleiste nicht deaktiviert, es wird jedoch ein Bildlauf verhindert.

    – Thomas

    9. Oktober 2013 um 15:15 Uhr

  • Ich mag diese Lösung 🙂

    – Jondinham

    16. Oktober 2013 um 1:47 Uhr

  • Ihre Lösung funktioniert, aber wenn Sie das Popup schließen und das Scrollen erneut aktivieren, wird auch ein horizontales Scrollen angezeigt. Was nicht erforderlich ist.

    – Sunil Paclangia

    26. Oktober 2017 um 12:24 Uhr

Eine Möglichkeit besteht darin, die vorübergehend festzulegen overflow Eigentum zu hidden an bodydas die Bildlaufleisten entfernt, aber ein kleines Flackern verursacht, wenn die Seite angepasst wird.

Die andere Möglichkeit ist, auf zu tippen $(window).scroll() event und von dort false zurückgeben. Das wird auch ein leichtes Flimmern verursachen, da der Browser nicht so schnell auf die falsche Rückgabeanweisung reagiert.

Am besten verschieben Sie Ihre Click-Event-Handler in eine separate Datei und nehmen dort die Bindung vor:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

Das sollte verhindern, dass eine Seite scrollt. Denken Sie daran, die Bindung nach dem Schließen des Dialogs zu entfernen, da die Seite sonst nicht mehr scrollbar ist! Sie können Bindungen entfernen mit:

$(window).unbind('scroll');

  • Vielen Dank. Aber würde diese Lösung Bildschirmflackern verursachen? Außerdem wird der pageTracker durch ein in WordPress eingerichtetes benutzerdefiniertes Feld geleitet und wäre nicht einfach mit jQuery zu verbinden.

    – Jo

    4. Februar 2010 um 18:18 Uhr

  • Ich habe die gleiche Situation. Dies ist eine nette Lösung, da es den Bildlauf in FF24.0 sperrt, aber die Seite trotzdem mit end/home/pageup/pagedown verschieben kann; auch scheint es nicht in IE8 zu funktionieren. Ich habe es nicht weiter als diese beiden Browser getestet, aber der obige Kommentar scheint zu zeigen, dass diese Frage etwas Arbeit erfordert.

    – Thomas

    9. Oktober 2013 um 15:34 Uhr

Verwenden Sie nicht das #-Tag in Ihren Links!

Es wird versuchen, zum Anker # zu scrollen, aber da es leer ist, wird es zum Anfang der Seite scrollen.

Bearbeiten Sie Ihre Links zu:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(beachten Sie das href=””)

  • Verwenden Sie unbedingt das Hashtag und auf keinen Fall Inline-JavaScript. Um zu verhindern, dass der Browser zu # umleitet, können Sie verwenden return false; am Ende der Handler-Funktion. crisp.tweakblogs.net/blog/313/…

    – Tatu Ulmanen

    4. Februar 2010 um 17:59 Uhr

  • Tut mir leid, Rogier, das hat das Problem nicht gelöst. Es sorgt auch dafür, dass die Seite neu geladen wird, wodurch das Popup geschlossen wird. Trotzdem danke!

    – Jo

    4. Februar 2010 um 18:01 Uhr

  • Ja, Sie müssen natürlich immer noch return false verwenden! Aber das ist wirklich einfaches JS 😉 <a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a> Wird gut funktionieren.

    – Roger Far

    4. Februar 2010 um 18:02 Uhr

  • Was ist mit “javascript:void(0);”?

    Benutzer216441

    4. Februar 2010 um 18:04 Uhr

  • Was auch immer in der href steht, ist unerheblich, da der ‘return false’ den Browser daran hindert, zu dieser Adresse zu gehen. Denken Sie daran, dass Sie Bandbreite verschwenden, indem Sie etwas anderes als die das absolut Nötigste — einige Seiten mit wenig Verkehr kümmern sich offensichtlich nicht um solche Dinge.

    – BryanH

    4. Februar 2010 um 20:49 Uhr

Benutzer-Avatar
mkk

Dieser Codeblock funktioniert für mobile iOS-Geräte, bei denen das Bildlaufproblem sehr häufig auftritt.

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});

Benutzer-Avatar
Rajan Gupta

Wenn Sie es so verwenden

<a href="#targetid">Open Model</a> 

(#tragetid) ist die div-Popup-ID.

Sie können verwenden und ersetzen href="" mit data-mfp-src="". Es funktioniert perfekt.

  • Ich sehe nicht, wie dies die Frage beantwortet. Soll dies ein Kommentar zu einer anderen Antwort sein?

    – Artjom B.

    27. Oktober 2018 um 9:24 Uhr

  • Ich sehe nicht, wie dies die Frage beantwortet. Soll dies ein Kommentar zu einer anderen Antwort sein?

    – Artjom B.

    27. Oktober 2018 um 9:24 Uhr

1027920cookie-checkScrollen im Hintergrund beim Anzeigen von Popups verhindern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy