Einstellung Überlauf-y: versteckt; bewirkt, dass die Seite an die Spitze in Firefox

springt Ich habe einige Javascript, die Modal Popups auf meiner Website zu öffnen behandelt, und es setzt auch die overflow-y -Eigenschaft auf dem <html> Element zu . In Chrome und IE funktioniert das wie erwartet - die Bildlaufleiste wird ausgeblendet, und die Seite hinter dem modalen Popup bleibt in der gleichen Bildlaufposition. Wenn das Popup geschlossen ist, wird overflow-y auf scroll gesetzt und die Seite befindet sich in demselben Zustand und derselben Position wie zuvor.Einstellung Überlauf-y: versteckt; bewirkt, dass die Seite an die Spitze in Firefox

In Firefox jedoch, sobald overflow-y geändert wird in hidden springt die Seite Bildlauf-Position an die Spitze, und wenn das Popup geschlossen wird, hat sich die Ansicht für den Benutzer geändert - nicht ideal.

Das Problem kann on this jsfiddle

Gibt es für dieses Verhalten eine Lösung zu sehen ist?

Quelle

2013-02-22 Runcible

Scheint in FF 19 gut zu funktionieren. – robertklep

Ich stehe vor einem ähnlichen Problem, wie konnten Sie damit umgehen? –

Haben Sie jemals eine Lösung dafür gefunden? Wenn ja, könnten Sie eine Antwort geben? Ich bin dabei meinen Verstand zu verlieren. – Grant

-1

Verwenden Sie Body-Tag anstelle von HTML.

JS Fiddle: - http://jsfiddle.net/SBLgJ/6/

JS ändern: -

$(document).ready(function() { 
    $('#middle a').on('click', function(e) { 
     e.preventDefault(); 
     $('body').css('overflow-y', 'hidden'); 
    }); 
});

CSS ändern: -

body { 
    overflow-y:scroll; 
}

Es gibt eine gemeldete Problem für ein solches Verhalten.()

Quelle

2013-02-22 08:28:15

Diese Lösung funktioniert in Google Chrome nicht v35.0.1916.114 m – Erik

Es gibt viele Bugs in den verschiedenen Browsern und die Funktionalität ist überall, also vorsichtig sein, Stile auf Body und HTML-Tags zu ändern.

um dieses Problem zu lösen, ich hatte den Körper des Inhalt in ein eigenes Element zu wickeln und die Scroll-Beschränkung gelten:

var $content = $('<div/>').append($body.contents()).appendTo($body); 
$content.css('overflow-y', 'hidden');

Dies ist der einzige Weg, ich habe in der Lage gewesen, diese Arbeit konsequent zu vermitteln verschiedene Browser und Geräte.

Quelle

2015-06-30 23:51:20

Ich bin gerade auf dieses Problem gestoßen. Mein Fix war

/** 
* Store the scroll top position as applying overflow:hidden to the body makes it jump to 0 
* @type int 
*/ 
var scrollTop; 

$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) { 
    // Stuff... 
    scrollTop = $('body').scrollTop() || $('html').scrollTop(); 
    $('body,html').css({overflow: 'hidden'}); 
}); 

$(selector).unbind('click.closemenu').on('click.closemenu', function (e) { 
    // Stuff 
    $('body,html').css({overflow: 'initial'}).scrollTop(scrollTop); 
});

Dies löst jedoch nicht das Problem, was passiert, wenn ein Benutzer die Größe des Ansichtsfensters ändert.

Quelle

2016-08-18 16:19:31

Verwenden Sie nicht overflow: hidden auf html, nur auf body. Ich hatte das gleiche Problem, aber behoben, indem Sie html entfernen.

Statt:

$('body, html').css('overflow', 'hidden');

Do:

$('body').css('overflow', 'hidden');

Quelle

2016-08-27 17:20:20 Steffi

Auf iOS ermöglicht dies, dass der übergelaufene Inhalt weiterhin scrollbar ist. – Gavin

die Körpergröße 100% von Anfang an Keeping löste das Problem für mich.

body{ 
    height:100vh; 
    overflow:auto; 
} 
body.with-modal{ 
    overflow:hidden; 
}

Quelle

2018-02-05 01:52:21

Einstellung Überlauf-y: versteckt; bewirkt, dass die Seite an die Spitze in Firefox

Antwort

Verwandte Themen