"यह साइट स्क्रॉल-लिंक्ड पोजीशनिंग प्रभाव का उपयोग करने लगती है। यह असीमित पनिंग"

Question

के साथ अच्छी तरह से काम नहीं कर सकता है मुझे फ़ायरफ़ॉक्स से यह असामान्य चेतावनी दी गई है। जिस स्थिति को संदर्भित करता है वह div है जो मैं स्क्रॉल ऊंचाई के कारक के रूप में घूमता हूं। मुझे इसके साथ कभी भी कोई समस्या नहीं हुई है, लेकिन क्या यह कुछ मुझे चिंतित होना चाहिए? क्या इस चेतावनी के बिना ऐसे प्रभाव होने के लिए वैसे भी है? जावास्क्रिप्ट कि इस मुद्दे को दर्शाता है:

//Rotate gears in about section 
    $('.gear').css({ 
     'transition': 'transform 1s ease-out', 
     '-webkit-transform': 'rotate(' + Math.round(wScroll/2) + 'deg)', 
     '-moz-transform': 'rotate(' + Math.round(wScroll/2) + 'deg)', 
     '-ms-transform': 'rotate(' + Math.round(wScroll/2) + 'deg)', 
     'transform': 'rotate(' + Math.round(wScroll/2) + 'deg)', 
    }); 

• wScroll वर्तमान पुस्तक ऊंचाई

Answer 1

चेतावनी, मुझे लगता है, कहने के लिए पर चला जाता है है:

... अधिक जानकारी के लिए और संबंधित टूल्स और सुविधाओं पर चर्चा में शामिल होने के लिए https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects देखें!

लेकिन यदि यह पृष्ठ अस्पष्ट है, तो इसका सारांश यहां दिया गया है।

"अतुल्यकालिक पैनिंग" के विचार यह है: जब पेज स्क्रॉल किया है, ब्राउज़र अपने scroll हैंडलर कहता है, लेकिन यह भी एसिंक्रोनस रूप पेज नया स्क्रॉल बिंदु पर पेंट करता है। स्क्रॉलिंग उत्तरदायी दिखाई देने के लिए किया जाता है (@ 60 एफपीएस) जब मुख्य धागा 16ms से अधिक के लिए व्यस्त होता है।

इसका मतलब है कि आपके हैंडलर लागू होने वाले प्रभाव वर्तमान स्क्रॉलिंग स्थिति के साथ समन्वयित होने की गारंटी नहीं देते हैं। अर्थात। स्क्रॉलिंग चिकनी है, लेकिन आपके divs एक छोटे FPS के साथ घूमते हैं - janky, गैर-चिकनी दिखाई देते हैं।अद्यतन, आपके उदाहरण में transition प्रभाव से चूक गया - रोटेशन स्वयं भी चिकना होगा, लेकिन पृष्ठ स्क्रॉल होने के बाद से शुरू हो सकता है।

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

उदाहरण

(ध्यान दें कि APZ कार्रवाई में देखने के लिए, आप Firefox संस्करण पर चलती इसके साथ सक्षम की जरूरत है। विशेष रूप से यह फ़ायरफ़ॉक्स ("e10s") मोड, एक मल्टीप्रोसेस में चल पड़ने की आवश्यकता है जो

window.onscroll = function() { 
 
    var wScroll = document.documentElement.scrollTop; 
 
    document.getElementById("gear-css").style.transform = 'rotate(' + Math.round(wScroll/2) + 'deg)'; 
 
    document.getElementById("gear-js") .style.transform = 'rotate(' + Math.round(wScroll/2) + 'deg)'; 
 
    document.getElementById("gear-js").textContent = leftPad(wScroll+'', '0', 4); 
 

 
    setTimeout(slowdown(500), 0); 
 
}; 
 

 
function leftPad(s, ch, maxLen) { return ch.repeat(maxLen - s.length) + s; } 
 
function slowdown(timeMs) { 
 
    return function() { 
 
    var start = Date.now(); 
 
    var j = ""; 
 
    for (var i = 0; (Date.now() - start < timeMs); i++) 
 
     j = j+(start+"")*i; 
 
    } 
 
} 
 

 

 
window.onload = function() { 
 
    for (let i = 0; i < 15; i++) { 
 
    var p = document.createElement("p"); 
 
    p.innerText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`; 
 
    document.documentElement.appendChild(p); 
 
    } 
 
}

#gear-css, #gear-js { 
 
    border: solid black 1px; 
 
} 
 
#gear-css { 
 
    transition: transform 1s ease-out 
 
}

<div style="position: fixed; top: 0; right: 0; padding: 3em;"> 
 
    <div id="gear-css">ooo</div> 
 
    <div id="gear-js">ooo</div> 
 
</div>

Answer 2

मुझे पता है कि इस सवाल का कुछ समय के लिए कहा गया था पहले, हालांकि, प्रदर्शन मुद्दा अभी भी मौजूद है रिलीज इस समय बनाता में अब भी नहीं है।)। नीचे एक वैकल्पिक समाधान है जो स्क्रोलिंग ईवेंट श्रोता पर भरोसा नहीं करता है। यह वेब ब्राउज़र के बीच आम स्क्रॉलिंग थ्रेड के कारण जंक और अंतराल को कम करता है, जब खिड़की स्क्रॉल होने की बजाय नियमित अंतराल पर सीएसएस को अद्यतन करता है। इसका मतलब है कि देव कंसोल चेतावनी प्रदर्शित नहीं होगी। मैं व्यक्तिगत रूप से चेतावनी के बारे में चिंतित नहीं होता या छोटी चीजों के लिए स्क्रॉलिंग घटनाओं का उपयोग नहीं करता जैसे गियर बदलना या सीएसएस वर्ग बदलना, हालांकि, यदि उपयोगकर्ता का अनुभव सीधे प्रभाव पर निर्भर करता है, तो यह पृष्ठ की उपयोगिता को नष्ट कर देगा।

var gear; 
var lastPosition; 
var refreshRate = 60; // fps; reduce for less overhead 
var animation = "rotate(*deg)"; // css style to apply [Wildcard is *] 
var link = 0.5; //what to multiply the scrollTop by 

function replace(){ 
    if(lastPosition != document.body.scrollTop){ // Prevents unnecessary recursion 
     lastPosition = document.body.scrollTop; // updates the last position to current 
     gear.style.transform = animation.replace("*", Math.round(lastPosition * link)); // applies new style to the gear 
    } 
} 

function setup(){ 
    lastPosition = document.body.scrollTop; 
    gear = document.querySelector(".gear"); 
    setInterval(replace, 1000/refreshRate); // 1000/60 = 16.666... Invokes function "replace" to update for each frame 
} 
window.addEventListener("DOMContentLoaded", setup); 

एक कामकाजी उदाहरण on my GitHub का उपयोग किया जा सकता है। मैंने फ़ायरफ़ॉक्स, क्रोम और एज (काम) पर इसका परीक्षण किया है।

चेतावनी से बचने के लिए अन्य विकल्प css sticky elements का उपयोग करें या element.classList.add उपयोग करने के लिए कर रहे हैं() और element.classList.remove() तरीकों एक window.onscroll घटना के लिए limnked।

नोट: सीएसएस संक्रमणों का उपयोग करने के बारे में सावधान रहें, जहां संक्रमण की लंबाई अंतराल से अधिक लंबी होती है जिस पर सीएसएस शैली स्क्रिप्ट द्वारा अपडेट की जाएगी (जैसे स्क्रॉलिंग ईवेंट आधारित परिवर्तनों के साथ)। वेबकिट आधारित ब्राउज़र और एज HTML इस पर अप्रत्याशित तरीकों से व्यवहार करेंगे, आमतौर पर जब तक तत्व स्क्रिप्ट द्वारा अपडेट नहीं किया जाता है तब तक उनकी प्रारंभिक स्थिति में रहना होगा। जब तक कि आप जिस प्रभाव का इरादा रखते थे, उस स्थिति में, यह किसी भी तरह से फ़ायरफ़ॉक्स में काम नहीं करता है।

सर्वो Webrender, जब Firefox में एकीकृत एक हद तक इन समस्याओं का समाधान होगा (या कम से कम प्रदर्शन काफी काफी सुधार)। यद्यपि संगतता बनाए रखने के लिए अभी भी अन्य ब्राउज़र होंगे।