पृष्ठभूमि रंग और रबर बैंड सफारी

मैं एक निश्चित शीर्षलेख/पादलेख और रबर बैंड मुख्य सामग्री में स्क्रॉल के साथ मोबाइल सफारी में एक वेबपेज निर्माण कर रहा हूँ मोबाइल में स्क्रॉल:पृष्ठभूमि रंग और रबर बैंड सफारी

html, 
 
body { 
 
    margin: 0 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: auto; 
 
} 
 
.header, 
 
.footer { 
 
    height: 50px; 
 
    position: fixed; 
 
    z-index: 100; 
 
    width: 100%; 
 
} 
 
.header { 
 
    top: 0; 
 
    background-color: #44677F; 
 
} 
 
.footer { 
 
    bottom: 0; 
 
    background-color: #4E3AFF; 
 
} 
 
.container { 
 
    height: 100%; 
 
    overflow: auto; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 
.content { 
 
    background-size: 50px 50px; 
 
    background-color: #D0FCFF; 
 
    background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent); 
 
    height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <header class="header"></header> 
 
    <div class="container"> 
 
    <div class="content"></div> 
 
    </div> 
 
    <footer class="footer"></footer> 
 
</body> 
 

 
</html>

रबर बैंड स्क्रॉलिंग के दौरान दृश्य क्षेत्र के पृष्ठभूमि रंग को मैं कैसे बदल सकता हूं?

मैं, शीर्षलेख/पादलेख के एक ही रंग का उपयोग करें ताकि जब मैं ऊपर स्क्रॉल करना चाहते हैं:

header

और जब मैं नीचे स्क्रॉल:

footer

मैं पता है कि शरीर में पृष्ठभूमि रंग सेट करके स्क्रॉलिंग क्षेत्रों के पूरे रंग को बदलना संभव है:

.body { 
    background-color: rebeccapurple; 
}

तो मैं एक ढाल का उपयोग करने की कोशिश की:

.body { 
    background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%); 
}

लेकिन यह काम नहीं किया।

स्रोत

2016-04-28 Paul

स्क्रॉलिंग एक घटना है इस प्रकार स्क्रॉल करते समय सीएसएस पृष्ठभूमि को बदल नहीं सकता है। हालांकि आप JQuery के [.load()] (http://api.jquery.com/scroll/) का उपयोग करके ऐसा कर सकते हैं API –

@MichaelSchwartz मुझे जावास्क्रिप्ट का उपयोग करने में खुशी है अगर यह समस्या हल करने का यही एकमात्र तरीका है। हालांकि मैं jQuery का उपयोग नहीं करना पसंद करूंगा। – Paul

मैं अभी बस अपने फोन का उपयोग बस पर कर रहा हूं इसलिए इस समय मैं बहुत मदद नहीं कर सकता। [यहां है] (http://kodeweave.sourceforge.net/editor/#42bd3465730905bf15f71b6d1bf9101b) एक बुनाई मैं आपको दिखाता हूं कि JQuery के [.load()] (http://api.jquery.com/) का उपयोग करके स्टाइल को कैसे संभालना है स्क्रॉल /) –

एक तरीका यह है कि आप इसे प्राप्त कर सकते हैं अपनी सामग्री के पीछे निश्चित तत्व जोड़ना, शीर्ष के लिए एक तत्व और नीचे के लिए एक ही पृष्ठभूमि रंग के साथ अपने हेडर/पाद लेख के रूप में।

#headerBackground { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{headerColor} 
} 
#footerBackground { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    bottom: 0; 
    height: 50%; 
    background-color: #{footerColor} 
} 
<body> 
    <div id="footerBackground "></div> 
    <div id="headerBackground "></div> 
    <header class="header"></header> 
    <div class="container"> 
    <div class="content"></div> 
    </div> 
    <footer class="footer"></footer> 
</body>

आपको हेडर/पाद लेख के पीछे होने के लिए जेड-इंडेक्स के साथ खेलना पड़ सकता है।

स्रोत

2017-09-15 15:13:03

पृष्ठभूमि रंग और रबर बैंड सफारी

उत्तर

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