परिवर्तन सीएसएस

Question

मैं (overflow: scroll का प्रयोग करके)

तो यहाँ मेरा पहला प्रयास था में व्यूपोर्ट तत्वों की पृष्ठभूमि का रंग बदलना चाहते हैं: http://jsfiddle.net/2YeZG/

जैसा कि आप देख, वहाँ नए रंग को पेंट करने से पहले पिछले रंग का एक संक्षिप्त झिलमिलाहट है। अन्य में had समान problems है।

HTML5 rocks instructions के बाद, मैं requestAnimationFrame पेश करने का कोई लाभ नहीं हुआ इस समस्या को दूर करने की कोशिश की:

http://jsfiddle.net/RETbF/

क्या मैं गलत यहाँ कर रहा हूँ? क्रोमियम यहाँ के साथ http://jsfiddle.net/HJ9ng/

---

दायर बग:

---

यहाँ एक सरल एक ही समस्या दिखा उदाहरण है http://code.google.com/p/chromium/issues/detail?id=151880

Answer 1

अगर यह केवल पृष्ठभूमि रंग है, अच्छी तरह से तुम क्यों नहीं बस मूल पृष्ठभूमि रंग को लाल रंग में बदलें और स्क्रॉल करने के बाद इसे केवल गुलाबी में बदलें?

मुझे लगता है कि

#dad 
{ 
    overflow-y: scroll; 
    overflow-x: hidden; 
    width: 100px; 
    height: 600px; 
    background-color:red; 
}​ 

करने के लिए अपने सीएसएस बदल रहा Jquery आप में से कुछ को हटा दें और इस

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
}); 

के लिए इसे बदल और मैं इस लाइन

iChild.css('backgroundColor', 'red'); 

हटाने लेकिन है लाल रंग यह महत्वपूर्ण है कि निश्चित रूप से http://jsfiddle.net/2YeZG/5/

के लिए काम नहीं करेगा

Answer 2

मुझे मैनुअल का समाधान पसंद है। लेकिन भले ही मुझे वह नहीं मिलता जो आप वास्तव में करने की कोशिश कर रहे हैं, मैं कुछ चीजों को इंगित करना चाहता हूं। अपने बेवकूफ कोड में, मैंने देखा कि आप अनुरोध के लिए पॉल आयरिश के शिम शामिल हैंएनीमेशन फ्रेम। लेकिन आप इसका कभी भी उपयोग नहीं करते हैं। (यह मूल रूप से एक विश्वसनीय सेटटाइम है, कुछ और नहीं) यह फ्रेम आधारित एनिमेशन से है।)

इसलिए जब आप कुछ सीएसएस गुणों को बदलना चाहते हैं, तो मुझे नहीं लगता कि आपको इसकी आवश्यकता क्यों होगी। भले ही आप संक्रमण चाहते हैं, आपको सीएसएस संक्रमण पर भरोसा करना चाहिए।

की तुलना में अपने कोड की तरह

dad.bind('scroll', function() { 
    dad.css('background-color', 'pink'); 
    eachElemNameHere.css('background-color','randomColor'); 
}); 

कुछ दिखाई दे सकता है कि इसके अलावा, आप आदर्श ऐसा ही कुछ प्रयोग नहीं करना चाहिए यदि आप इसे मदद कर सकते हैं अन्य

। आपको कक्षा के नाम जोड़ना और निकालना चाहिए और इन सभी गुणों को अपने सीएसएस में जोड़ना चाहिए। यह तेजी से काम करता है।

इसके अलावा, फिर भी मुझे यह काफी नहीं मिलता है, लेकिन आप बेहतर नियंत्रण रखने के लिए शीर्ष से प्रत्येक तत्व की स्थिति का पता लगाने के लिए jQuery फ़ंक्शन का उपयोग कर सकते हैं।

Answer 3

आपकी समस्या यह प्रतीत होती है कि आप केवल उन तत्वों का पृष्ठभूमि रंग बदलते हैं जो को पहले से ही में स्क्रॉल किया गया है। आपका कोड अपेक्षा करता है कि ब्राउजर अपने कोड को स्क्रॉल ईवेंट को संभालने के लिए इंतजार कर रहा है इससे पहले ब्राउजर अपने दृश्य को दोबारा हटा देता है। यह शायद एचटीएमएल स्पेक द्वारा दी गई गारंटी नहीं है। यही कारण है कि यह झिलमिलाहट।

इसके बजाय आपको क्या करना चाहिए उन तत्वों को बदलने के लिए है जिन्हें देखने के लिए स्क्रॉल किया जा रहा है। यह से संबंधित स्क्रीन प्रतिपादन या डबल बफरिंग से संबंधित है क्योंकि इसे कंप्यूटर गेम प्रोग्रामिंग में कहा जाता है। आप स्क्रीन से अपना दृश्य बनाते हैं और दृश्य दृश्य को दृश्य फ्रेम बफर पर कॉपी करते हैं।

मैंने स्क्रॉल क्षेत्र की ऊंचाई के लिए गुणक को शामिल करने के लिए अपना पहला JSFiddle संशोधित किया: http://jsfiddle.net/2YeZG/13/।

dad.bind('scroll', function() { 
    // new: query multiplier from input field (for demonstration only) and print message 
    var multiplier = +($("#multiplier")[0].value); 
    $("#message")[0].innerHTML=(multiplier*100)-100 + "% of screen rendering"; 

    // your original code 
    var newScrollY = newScrollY = dad.scrollTop(); 
    var isForward = newScrollY > oldScrollY; 
    var minVal = bSearch(bots, newScrollY, true); 

    // new: expand covered height by the given multiplier 
    //  multiplier = 1 is similar to your code 
    //  multiplier = 2 would be complete off screen rendering 
    var newScrollYHt = newScrollY + multiplier * dadHeight; 

    // your original code (continued) 
    var maxVal; 
    for (maxVal = minVal; maxVal < botsLen; maxVal++) { 
     var nxtTopSide = tops[maxVal]; 
     if (nxtTopSide >= newScrollYHt) { 
      break; 
     } 
    } 
    maxVal = Math.min(maxVal, botsLen); 
    $(dadKids.slice(minVal, maxVal)).css('background', 'pink'); 
}); 

आपका कोड 1 के एक गुणक था, जिसका अर्थ है कि आप तत्व है जो वर्तमान में दिखाई दे रहे हैं अद्यतन (स्क्रॉल क्षेत्र ऊंचाई का 100%)। यदि आप गुणक को 2 पर सेट करते हैं, तो आपको अपने सभी तत्वों के लिए स्क्रीन अपडेट पूर्ण हो जाते हैं। ब्राउज़र नए पृष्ठभूमि रंग में पर्याप्त तत्व अपडेट करता है ताकि 100% स्क्रॉल भी अपडेट किए गए तत्व दिखाए। चूंकि ब्राउजर शायद ही कभी एक चरण में क्षेत्र का 100% स्क्रॉल करता है (ऑपरेटिंग सिस्टम और स्क्रॉल विधि पर निर्भर करता है!), गुणक को कम करने के लिए यह पर्याप्त हो सकता है उदा। 1.5 (जिसका अर्थ है स्क्रीन प्रतिपादन से 50%)। मेरी मशीन पर (Google क्रोम, मैक ओएस एक्स टच पैड के साथ) यदि गुणक 1.7 या इससे ऊपर है तो मैं किसी भी झिलमिलाहट का उत्पादन नहीं कर सकता।

बीटीडब्ल्यू: यदि आप पृष्ठभूमि रंग को बदलने से कहीं अधिक जटिल करते हैं, तो आपको इसे बार-बार नहीं करना चाहिए। इसके बजाय आपको यह जांचना चाहिए कि तत्व पहले ही अपडेट हो चुका है या बाद में परिवर्तन कर रहा है या नहीं।