छवि के लिए सीमित स्क्रॉलिंग

मैं एक मोबाइल वेबसाइट विकसित कर रहा हूं, और वेबसाइट लोड होने के बाद एक पूर्ण-स्क्रीन छवि फ़्लोटिंग-परत के रूप में दिखाई देगी।छवि के लिए सीमित स्क्रॉलिंग

कृपया नीचे देखें ........ enter image description here

एक: के बाद पृष्ठ लोड किया, एक पूर्ण स्क्रीन: मेरा मोबाइल वेबसाइट जो खिड़कियों ऊंचाई

बी से अधिक सामग्री की एक बहुत कुछ शामिल है छवि सामग्री के शीर्ष पर एक फ़्लोटिंग परत के रूप में प्रकट होता है। छवि विंडोज़ ऊंचाई

सी: जब उपयोगकर्ता नीचे स्क्रॉल करता है, तो वह छवि के निचले भाग को देख सकता है, लेकिन वेबसाइट सामग्री नहीं। छवि के निचले भाग को स्क्रीन तल से कभी अलग नहीं किया जाना चाहिए इससे कोई फर्क नहीं पड़ता कि उपयोगकर्ता

क्या मुझे पता है कि मैं सी कैसे प्राप्त कर सकता हूं ??

इसके अलावा, स्थिति बी में, कभी-कभी छवि स्क्रीन की ऊंचाई से अधिक नहीं हो सकती है यदि उपयोगकर्ता बड़ी स्क्रीन वाले स्मार्टफ़ोन का उपयोग कर रहा है, तो इस मामले में, छवि स्क्रीन के शीर्ष पर तय की जानी चाहिए और स्क्रॉल करने योग्य नहीं है।

यह बेहतर होगा अगर उपर्युक्त सभी jquery का उपयोग न करके हासिल किया जा सके। हालांकि, अगर यह जरूरी है, तो यह अभी भी ठीक है ........

बहुत धन्यवाद।

स्रोत

2013-10-12 Kit Ng

हाथ से तैयार उदाहरण के लिए +1 –

jQuery जावास्क्रिप्ट है। आप हमेशा jQuery की बजाय शुद्ध जावास्क्रिप्ट का उपयोग कर सकते हैं। – ComFreek

जबकि सामान्य प्रभाव केवल सीएसएस के साथ करने योग्य है, तो आपको प्रभाव को चालू और बंद करने के लिए शायद जावास्क्रिप्ट की आवश्यकता होगी। जबकि bodyoverflow: hidden है

सामान्य विचार, एक परत छवि युक्त पर position: fixed और overflow: scroll उपयोग करने के लिए है। इन परिस्थितियों में, आप ओवरले की सामग्री को स्क्रॉल करने में सक्षम हैं लेकिन शरीर नहीं।

हालांकि यह डेस्कटॉप पर काम करता है, मोबाइल पर चीजें थोड़ा अलग होती हैं जहां body पर overflow: hidden के बावजूद सभी सामग्री प्रदान की जाएगी। एक त्वरित कार्य-आसपास position: fixed को body पर भी लागू करना है। मुझे नहीं पता कि यह इरादा व्यवहार है, लेकिन यह आईओएस पर सफारी और क्रोम दोनों में ठीक काम करता है।

मार्कअप की रूपरेखा:

<body class="no-scroll"> 
    <section class="content"> 
    /* content here */ 
    </section> 

    <aside class="overlay"> 
    <img src="img.jpg"> 
    </aside> 
</body>

सीएसएस:

.no-scroll { 
    overflow: hidden; 
    position: fixed; 
} 

.overlay { 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    display: none; 
} 

.overlay img { 
    width: 100%; 
    height: auto; 
} 

.no-scroll .overlay { 
    display: block; 
}

यह आप जावास्क्रिप्ट इस्तेमाल कर सकते हैं body पर वर्ग no-scroll टॉगल करने के लिए के साथ

। जब यह वहां होता है, तो बहती हुई सामग्री छिपी हुई है और overlay दिखाई दे रहा है। जब यह वहां नहीं होता है, तो overlay छिपा हुआ है।

यहां प्रभाव (उदाहरण के बिना) का एक उदाहरण दिया गया है।कोई पुस्तक वर्ग और जावास्क्रिप्ट, हालांकि, बस पता चलता है कि यह काम करता है):

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

उदाहरण में ऊपर, मैं दे दिया overlay एक अर्ध-पारदर्शी पृष्ठभूमि और इसके अंदर छवि को max-width 100% दिया। यदि आप पूरी स्क्रीन को छवि से भरना चाहते हैं, तो max-width को नियमित width पर बदलें।

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

के रूप में अनुरोध किया है, यहाँ प्रभाव टॉगल करने के लिए एक jQuery समारोह है।

$(".close").click(function() { 
    $("body").toggleClass("no-scroll"); 
});

बस एक <button> या जो कुछ भी वर्ग के नाम close दे और उस पर और बंद प्रभाव टॉगल जाएगा।

स्रोत

2013-10-13 12:15:38

यह उत्तर शानदार है! बहुत बहुत धन्यवाद = डी –

बस एक ऐड-ऑन प्रश्न: क्या उपयोगकर्ता छवि को फिर से शुरू करना संभव होगा (ओवरफ़्लो हटाएं: छुपाएं और स्थिति: निश्चित) जब उपयोगकर्ता छवि परत बंद कर देता है? –

हां। जैसा कि मैंने अपने उत्तर में लिखा था, आपको शायद जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी। चूंकि आपने jQuery के बारे में बात की है, इसलिए मैं इसका उपयोग कर एक उदाहरण दूंगा। एक मिनट में मेरा अपडेट देखें। –

छवि के लिए सीमित स्क्रॉलिंग

उत्तर

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