html scrolling Wie kann man das Scrollen im Hintergrund verhindern, wenn Bootstrap 3 Modal in mobilen Browsern geöffnet ist?



overlay prevent background scrolling (16)

Wie kann man das Scrollen im Hintergrund verhindern, wenn Bootstrap 3 Modal auf mobilen Plattformen geöffnet ist? Auf Desktop-Browsern wird verhindert, dass der Hintergrund scrollt und funktioniert so wie er sollte.

Wenn in mobilen Browsern (Safari ios, Chrome ios usw.) ein Modal geöffnet und mit dem Finger geblättert wird, scrollt der Hintergrund ebenso wie das Modal. Wie verhindere ich das?


Answer #1

Ich dachte, Sie könnten vergessen, Attributdaten data-toggle="modal" zu dem Link oder Button hinzuzufügen, der das modale Popup-Ereignis auslöst. Erstens habe ich auch das gleiche Problem, aber nachdem ich das obige Attribut hinzugefügt habe, funktioniert es gut für mich.


Answer #2

Die Verwendung von position:fixed hat den Nebeneffekt, dass der Körper nach oben gescrollt wird.

Wenn Sie Ihren Körper nicht nach oben scrollen möchten, verwenden Sie NOTE position:fixed . Deaktivieren Sie einfach touchmove auf dem Körper, wenn das Modal geöffnet ist. Hinweis: Das Modal selbst kann immer noch bei Berührung scrollen (wenn es größer als der Bildschirm ist).

CSS:

body.modal-open {
    overflow: hidden;
    width: 100%;
    /* NO position:fixed here*/
}

JS:

$('.modal').on('show.bs.modal', function (ev) { // prevent body from scrolling when modal opens
    $('body').bind('touchmove', function(e){
        if (!$(e.target).parents().hasClass( '.modal' )){ //only prevent touch move if it is not the modal
            e.preventDefault()
        }
    })
})
$('.modal').on('hide.bs.modal', function (e) { //unbind the touchmove restrictions from body when modal closes
    $('body').unbind('touchmove');
})

BEARBEITEN: Beachten Sie, dass Sie für sehr kleine Mods möglicherweise die folgende Zeile zu Ihrem CSS hinzufügen müssen:

.modal-dialog{
    height: 100%;
}

Answer #3
$('.modal') 
.on('shown', function(){ 
  console.log('show'); 
  $('body').css({overflow: 'hidden'}); 
}) 
.on('hidden', function(){ 
  $('body').css({overflow: ''}); 
}); 

verwende das hier


Answer #4

Ich weiß, dass dies beantwortet wurde, aber keine dieser Lösungen hat für mich funktioniert. Ich musste einen anderen Ansatz wählen. Ich benutze PhoneGap und kompiliere meinen Code nativ, so dass ich den Hintergrund auf den Körper verschieben musste. Ich hoffe, das hilft jemand anderem. Oder wenn es eine sauberere Möglichkeit gibt, dies zu tun, zögern Sie nicht, zu kommentieren ...

$(document).on('shown.bs.modal', '.modal', function (e) {

    $("#" + e.target.id).find(".modal-backdrop").css("z-index", $("#" + e.target.id).css("z-index")).insertBefore("#" + e.target.id);

});

Answer #5

Versuche dies,

 body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

Answer #6

Meine Lösung...

Ver en jsfiddle

//Fix modal mobile Boostrap 3
function Show(id){
    //Fix CSS
    $(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
    $(".modal-body").css("overflow-y","auto");
    //Fix .modal-body height
    $('#'+id).on('shown.bs.modal',function(){
        $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
        h1=$("#"+id+">.modal-dialog").height();
        h2=$(window).height();
        h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
        h4=h2-(h1-h3);      
        if($(window).width()>=768){
            if(h1>h2){
                $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
            }
            $("#"+id+">.modal-dialog").css("margin","30px auto");
            $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
            $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);               
            if($("#"+id+">.modal-dialog").height()+30>h2){
                $("#"+id+">.modal-dialog").css("margin-top","0px");
                $("#"+id+">.modal-dialog").css("margin-bottom","0px");
            }
        }
        else{
            //Fix full-screen in mobiles
            $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
            $("#"+id+">.modal-dialog").css("margin",0);
            $("#"+id+">.modal-dialog>.modal-content").css("border",0);
            $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);   
        }
        //Aply changes on screen resize (example: mobile orientation)
        window.onresize=function(){
            $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
            h1=$("#"+id+">.modal-dialog").height();
            h2=$(window).height();
            h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
            h4=h2-(h1-h3);
            if($(window).width()>=768){
                if(h1>h2){
                    $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
                }
                $("#"+id+">.modal-dialog").css("margin","30px auto");
                $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
                $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);               
                if($("#"+id+">.modal-dialog").height()+30>h2){
                    $("#"+id+">.modal-dialog").css("margin-top","0px");
                    $("#"+id+">.modal-dialog").css("margin-bottom","0px");
                }
            }
            else{
                //Fix full-screen in mobiles
                $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
                $("#"+id+">.modal-dialog").css("margin",0);
                $("#"+id+">.modal-dialog>.modal-content").css("border",0);
                $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);   
            }
        };
    });  
    //Free event listener
    $('#'+id).on('hide.bs.modal',function(){
        window.onresize=function(){};
    });  
    //Mobile haven't scrollbar, so this is touch event scrollbar implementation
    var y1=0;
    var y2=0;
    var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0];
    div.addEventListener("touchstart",function(event){
        y1=event.touches[0].clientY;
    });
    div.addEventListener("touchmove",function(event){
        event.preventDefault();
        y2=event.touches[0].clientY;
        var limite=div.scrollHeight-div.clientHeight;
        var diff=div.scrollTop+y1-y2;
        if(diff<0)diff=0;
        if(diff>limite)diff=limite;
        div.scrollTop=diff;
        y1=y2;
    });
    //Fix position modal, scroll to top.    
    $('html, body').scrollTop(0);
    //Show
    $("#"+id).modal('show');
}

Answer #7

Ich öffne ein Modal nach einem Modal und Tatsache der Fehler beim modalen Scrollen, und dieses CSS löste mein Problem:

.modal {
    overflow-y: auto;
    padding-right: 15px;
}

Answer #8

Hatte ein Problem damit, iPhone + Safari, wo hinzugefügt werden musste:

position: fixed;

Wie bereits an anderer Stelle erwähnt, führte dies zu einem Scroll-to-Top-Problem. Fix, das für mich funktionierte, bestand darin, die Position zu erfassen, die beim Modal-Open oben ist, und dann auf diese Position beim Modal-Close zu animieren

nach Modal offen:

scrollTo = $('body').scrollTop();
$('body').css("position", "fixed");

auf Modal schließen

$('body').css("position", "static");
$('body').animate({scrollTop: scrollTo}, 0);


Answer #10

Mit freundlicher Genehmigung von JDiApice der die Arbeit anderer Mitwirkender bei iOS 8.x modal scroll # 14839 synthetisiert und erweitert hat :

@media only screen and (max-device-width:768px) {

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
    }
}

body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute;
}

body {
    overflow-x: hidden;
    overflow-y: scroll !important;
}

/* The reason the media specific is on there is 
   on a desktop i was having issues with when the modal would open 
   all content on the page would shift from centered to left. 
   Looked like crap. So this targets up to tablet size devices 
   where you would need to scroll. There is still a slight shift 
   on mobile and tablet but its really not much. */

Im Gegensatz zu den anderen Lösungen, die wir ausprobiert haben, wird der Hintergrund nicht nach oben geblättert, nachdem das Popup-Modal geschlossen wurde.


Answer #11

Verhindert, dass der Hintergrund ohne großen Aufwand gescrollt wird.

Verhindert auch, dass Seiten von fehlenden Bildlaufleisten springen

body.modal-open {
        position: fixed;
        overflow-y: scroll;
    }

Answer #12

Als Ergänzung zu @Karthick Kumar Antwort von Bootstrap-Dokumenten

Show wird zu Beginn eines Ereignisses ausgelöst

angezeigt wird beim Abschluss einer Aktion ausgelöst

... so sollte es sein:

$('.modal')
    .on('show.bs.modal', function (){
            $('body').css('overflow', 'hidden');
        })
    .on('hide.bs.modal', function (){
            // Also if you are using multiple modals (cascade) - additional check
            if ($('.modal.in').length == 1) {
                $('body').css('overflow', 'auto');
            }
        });

Answer #13

Die obigen Antworten haben mir nicht geholfen.

.modal {
  -webkit-overflow-scrolling: touch; 
}

Mein besonderes Problem war, als ich nach dem Laden die Modalgröße erhöhte.

Es ist ein bekanntes iOS-Problem, siehe hier . Da es nichts anderes bricht, reichte die obige Lösung für meine Bedürfnisse aus.


Answer #14

Hey Leute, ich denke, ich habe eine Lösung gefunden. Dies funktioniert für mich auf dem iPhone und Android im Moment. Es ist eine Ansammlung von Stunden nach Stunden des Suchens, Lesens und Testens. Also, wenn du Teile deines Codes hier drin siehst, geht das an dich, lol.

@media only screen and (max-device-width:768px){

body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute; 
}

body {  
overflow-x: hidden;
overflow-y: scroll !important;
}

Der Grund, warum das Medium spezifisch ist, ist auf einem Desktop, auf dem ich Probleme hatte, wenn das Modal geöffnet würde, würde sich der gesamte Inhalt auf der Seite von zentriert nach links verschieben. Sah wie Mist aus. Dies betrifft also Tablets, bei denen Sie scrollen müssen. Es gibt immer noch eine leichte Verschiebung auf Handy und Tablet, aber es ist wirklich nicht viel. Lass es mich wissen, wenn das für euch funktioniert. Hoffentlich steckt das den Nagel in den Sarg


Answer #15

Wenn Sie jQuery verwenden, können Sie dies mit scrollTop tun

  1. Speichern Sie die vertikale Bildlaufposition des Körpers.
  2. Scrolle auf dem Körper deaktivieren;
  3. Modal anzeigen;
  4. Modal schließen;
  5. Wiederholbare Schriftrolle am Körper;
  6. Stellen Sie die gespeicherte Bildlaufposition ein.

#modal {
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    width: 100%;
}

$('.open-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    scrollTo = $('body').scrollTop();
    $('body').css("position", "fixed");
});

$('.close-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    $('body').css("position", "static");
    $('body').animate({scrollTop: scrollTo}, 0);
});


Answer #16

Keine Skripte benötigt.

BS 3 legt eine .modal-open-Klasse für den Rumpf fest, mit der Sie die Positions- und Überlaufwerte festlegen können (die mit LESS erstellt wurden).

body {
    font-family:'Open Sans';
    margin:0;

    &.modal-open {
        position:fixed;
        overflow:hidden;

        .modal { 
            overflow: scroll;

            @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm),
            only screen and (-webkit-min-device-pixel-ratio:1.5) {
                overflow: scroll; 
                -webkit-overflow-scrolling: touch; 
            }
        }
    }   
}




twitter-bootstrap-3