So legen Sie Overflow fest: ausgeblendet, aber die Bildlaufleiste immer noch sichtbar?

Wenn Modal angezeigt wird, füge ich eine Klasse mit overflow: hodden zum Body-Tag hinzu. Der Inhalt hinter dem Modal scrollt also nicht. Alles ist gut.So legen Sie Overflow fest: ausgeblendet, aber die Bildlaufleiste immer noch sichtbar?

ABER

Wenn die ursprüngliche Seite groß genug ist, eine Bildlaufleiste haben, dann kann ich hässlich Verschiebung der Seite nach rechts sehen, wenn ich die modal öffnen. Ich finde den Grund für ein solches Verhalten heraus. Overflow: hidden bewirkt, dass die Bildlaufleiste verschwindet, also ist es ~ 10px Verschiebung nach rechts.

Meine Frage ist, wie das zu beheben ist. In der Tat muss ich overflow:hidden anwenden, aber noch Bildlaufleiste gezeigt haben.

Quelle

2016-08-18 Oner Ksor

Können Sie Ihren HTML- und CSS-Code (wenn möglich in einem JSFiddle) einfügen? – Roberrrt

@Roberrrt Welche Art von Code benötigen Sie? Ich habe meine App in Meteor + React, aber jeder Code ist nicht notwendig, meine Frage wird gut genug erklärt. Kann etwas wie 'showModal() {$ ('body'). Css ('overflow', 'hidden');}' und 'closeModal() {$ ('body'). Css ('overflow', 'auto ');} '. Aber das brauchst du wirklich nicht. Ich denke du verstehst die Frage nicht. –

Mein Fehler, ich habe deine Frage falsch verstanden, ich habe eine (mögliche) Lösung bereitgestellt, lass mich wissen, wie es endet! – Roberrrt

(function() { 
 
\t let _scrollPosition; 
 

 
\t function preventScroll(e) { 
 
\t \t e.preventDefault(); 
 
\t \t window.scroll(..._scrollPosition); 
 
\t } 
 

 
\t function lock() { 
 
\t \t _scrollPosition = [window.pageXOffset, window.pageYOffset]; 
 
\t \t $(window).on('scroll touchmove', preventScroll); 
 
\t } 
 

 
\t function unlock() { 
 
\t \t $(window).off('scroll touchmove', preventScroll); 
 
\t } 
 

 
\t return { 
 
\t \t lock, 
 
\t \t unlock 
 
\t }; 
 
})();

Sie können einfach die Scroll-Position sperren, sobald Sie den Modal mit diesem Code öffnen.

Quelle

2016-08-18 12:27:16 Roberrrt

danke für deine Antwort! Das Problem ist, dass ich den Benutzer brauche, um den Inhalt des Modals scrollen zu können. In Ihrer Lösung ist das Scrollen überhaupt nicht möglich. Möglicher Anwendungsfall ist, die aktuelle Y-Koordinate mit 'window.pageYOffset' zu erhalten und dann 'position: fixed' und' top: currentY px' zu setzen. Aber es ist viel einfacher, das mit 'overflow: hidden' zu tun, deshalb möchte ich etwas über die Sichtbarkeit der Scrollbar erfahren. –

So legen Sie Overflow fest: ausgeblendet, aber die Bildlaufleiste immer noch sichtbar?

Antwort

Verwandte Themen