पॉपअप प्रदर्शित करते समय पृष्ठभूमि स्क्रॉलिंग को रोकें

Question

मेरे पास एक ऐसा फॉर्म है जो पॉपअप में प्रदर्शित होता है। लोड होने के बाद, पृष्ठभूमि ग्रे हो गई है, लेकिन उपयोगकर्ता अभी भी पृष्ठभूमि सामग्री को ऊपर और नीचे स्क्रॉल कर सकता है।

मैं पृष्ठभूमि को स्क्रॉलिंग से कैसे रोकूं?

Example here

'ईमेल इस उद्धरण' पीडीएफ स्क्रीनशॉट के अधिकार के लिए लिंक।

धन्यवाद! जो

Answer 1

एक विकल्प अस्थायी रूप से hiddenbody पर करने के लिए overflow गुण सेट करने के लिए है, कि से छुटकारा मिल जाएगा स्क्रॉल बार, लेकिन पृष्ठ को समायोजित करते समय एक छोटा झिलमिलाहट का कारण बनता है।

अन्य विकल्प $(window).scroll() ईवेंट पर टैप करना और वहां से झूठी वापसी करना है। इससे थोड़ी झिलमिलाहट भी हो जाएगी क्योंकि ब्राउजर उस झूठी कथन के लिए तेज़ प्रतिक्रिया नहीं देता है।

आपका सबसे अच्छा शर्त एक अलग फाइल करने के लिए अपने क्लिक करें घटना संचालकों को स्थानांतरित करने और बाध्यकारी वहाँ क्या करना है:

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

कि स्क्रॉल से एक पृष्ठ पर रोक लगनी चाहिए। संवाद बंद होने के बाद बाध्य को हटाने के लिए याद रखें, अन्यथा पृष्ठ अब स्क्रोल करने योग्य नहीं होगा! आप का उपयोग कर बांध निकाल सकते हैं:

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

Answer 2

अपने लिंक में # टैग का उपयोग न करें!

यह एंकर # पर स्क्रॉल करने का प्रयास करेगा, लेकिन क्योंकि यह खाली है, यह पृष्ठ के शीर्ष पर स्क्रॉल करेगा। करने के लिए अपने लिंक

संपादित करें:

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

(href नोटिस = "")

Answer 3

शरीर के स्क्रॉलबार छिपाने जब पॉपअप

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

खोलने और वापस लौटने जब आईओएस मोबाइल के लिए पॉपअप

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

Answer 4

इस कोड को ब्लॉक काम करता है को बंद करने डिवाइस जहां स्क्रॉल समस्या बहुत आम है।

$('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'); 
});