ओवरफ्लो-वाई सेट करना: छुपा; पृष्ठ को फ़ायरफ़ॉक्स

में शीर्ष पर कूदने का कारण बनता है मेरे पास कुछ जावास्क्रिप्ट है जो मेरी वेबसाइट पर मोडल पॉपअप खोलने को संभालता है, और यह प्रॉपर्टी <html> तत्व hidden पर भी सेट करता है। क्रोम और आईई में यह अपेक्षित काम करता है - स्क्रॉलबार छुपाता है, और मोडल पॉपअप के पीछे वाला पृष्ठ उसी स्क्रॉल स्थिति में रहता है। जब पॉपअप बंद हो जाता है, overflow-yscroll पर सेट होता है और पृष्ठ पहले जैसा ही स्थिति और स्थिति में होता है।ओवरफ्लो-वाई सेट करना: छुपा; पृष्ठ को फ़ायरफ़ॉक्स

हालांकि फ़ायरफ़ॉक्स में, overflow-y को hidden में बदल दिया गया है, पृष्ठ स्क्रॉल स्थिति बहुत ऊपर तक कूदती है, और इसलिए जब पॉपअप बंद हो जाता है तो उपयोगकर्ता के लिए दृश्य बदल गया है - आदर्श नहीं।

समस्या on this jsfiddle

वहाँ इस व्यवहार के लिए किसी भी समाधान है देखा जा सकता है?

स्रोत

2013-02-22 Runcible

एफएफ 1 9 में ठीक काम करने लगता है। – robertklep

मुझे इसी तरह के मुद्दे का सामना करना पड़ रहा है, आप इसे कैसे संभालने में सक्षम थे? –

क्या आपको कभी इसके लिए समाधान मिला? यदि हां, तो क्या आप उत्तर दे सकते हैं? मैं अपना दिमागी संतुलन खोने वाला हूँ। – Grant

-1

एचटीएमएल के बजाय शरीर टैग का प्रयोग करें।

जे एस फिडल: - http://jsfiddle.net/SBLgJ/6/

जे एस बदलें: -

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

सीएसएस बदलें: -

body { 
    overflow-y:scroll; 
}

इस तरह के व्यवहार के लिए एक रिपोर्ट की गई समस्या नहीं है। (https://github.com/necolas/normalize.css/issues/71)

स्रोत

2013-02-22 08:28:15

यह समाधान Google क्रोम v35.0.1916.114 m – Erik

विभिन्न ब्राउज़रों में बहुत सारी बग हैं और कार्यक्षमता पूरी जगह पर है इसलिए शरीर और एचटीएमएल टैग पर शैलियों को संशोधित करने में सावधान रहें।

इस मुद्दे मैं अपने स्वयं के तत्व में शरीर की सामग्री लपेट और उस पर स्क्रॉल प्रतिबंध लागू करना पड़ा हल करने के लिए:

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

यही एक रास्ता है मैं इस लगातार में काम कर रहे करने के लिए कर लिया है है विभिन्न ब्राउज़रों और उपकरणों।

स्रोत

2015-06-30 23:51:20

मुझे अभी इस समस्या का सामना करना पड़ा। मेरा फिक्स

/** 
* 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); 
});

हालांकि उपयोगकर्ता द्वारा व्यूपोर्ट का आकार बदलने पर समस्या का समाधान नहीं होता है।

स्रोत

2016-08-18 16:19:31

पर body पर उपयोग न करें। मुझे एक ही समस्या थी लेकिन html को हटाकर इसे ठीक किया गया।

बजाय:

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

है:

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

स्रोत

2016-08-27 17:20:20 Steffi

आईओएस पर बिल्कुल भी काम नहीं करता है, यह अतिप्रवाह सामग्री को स्क्रॉल करने योग्य होने की अनुमति देता है। – Gavin

शुरू से ही शरीर की ऊंचाई रखते हुए 100% मेरे लिए समस्या हल हो।

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

स्रोत

2018-02-05 01:52:21

ओवरफ्लो-वाई सेट करना: छुपा; पृष्ठ को फ़ायरफ़ॉक्स

उत्तर

संबंधित मुद्दे