वर्टिकल स्क्रॉल के लिए मीडिया क्वेरी

Question

क्या मीडिया क्वेरी के साथ लंबवत स्क्रॉल दूरी का पता लगाने का कोई तरीका है?

ऐसा लगता है कि मीडिया प्रश्नों को मध्यम (चौंकाने वाला दायां: पी) का पता लगाने के आसपास डिज़ाइन किया गया है, इसलिए ब्राउज़र की ऊंचाई जैसी चीजें टेस्ट करने योग्य हैं, लेकिन विशेष रूप से पृष्ठ को कितनी दूर स्क्रॉल नहीं किया गया है।

यदि संभव नहीं है, लेकिन आप जेएस (jQuery नहीं) में पोस्ट करने के लिए स्वतंत्र महसूस करते हैं!

Answer 1

मुझे विश्वास नहीं है कि यह एक सीएसएस मीडिया क्वेरी के साथ संभव है, लेकिन मुझे पता है कि स्क्रॉल ऊंचाई window.pageYOffset का उपयोग कर जावास्क्रिप्ट में पाई जा सकती है। आप हर बार जब उपयोगकर्ता नीचे स्क्रॉल या एक पृष्ठ पर एक समारोह के माध्यम से इस मूल्य को चलाने के लिए चाहते हैं तो आपके

window.onscroll = function() { 
    scrollFunctionHere(window.pageYOffset); 
}; 

या बस की तरह कुछ कर सकता है:

window.onscroll = scrollFunctionHere; 

समारोह में ही चेक किया है window.pageYOffset का मान।

window.onscroll जावास्क्रिप्ट में कुशलतापूर्वक उपयोग करने के तरीके के बारे में अधिक सलाह के लिए, mynameistechno's answer देखें।

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

सरल नीचे स्क्रॉल ईवेंट हैंडलर कोड नीचे दिये गये। गौर करें कि पाठ "नमस्ते" और "दुनिया" हर 250ms के बीच टॉगल, बल्कि हर एक फ्रेम से:

var outputTo = document.querySelector(".output"); 
 
var timeout_debounce; 
 

 
window.addEventListener("scroll", debounce); 
 

 
function debounce(event) { 
 
    if(timeout_debounce) { 
 
     return; 
 
    } 
 

 
    timeout_debounce = setTimeout(clearDebounce, 250); 
 
// Pass the event to the actual callback. 
 
    actualCallback(event); 
 
} 
 

 
function clearDebounce() { 
 
    timeout_debounce = null; 
 
} 
 

 
function actualCallback(event) { 
 
// Perform your logic here with no CPU hogging. 
 
    outputTo.innerText = outputTo.innerText === "HELLO" 
 
    ? "WORLD" 
 
    : "HELLO"; 
 
}

p { 
 
    padding: 40vh; 
 
    margin: 20vh; 
 
    background: blue; 
 
    color: white; 
 
}

<p class="output">Test!</p>

Answer 2

पहले, स्वीकार किए जाते हैं जवाब काम नहीं करता।

सही नाम

window.onscroll 

और नहीं

window.onScroll 

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

दूसरा है, यह बुरी तरह अक्षम है समारोह के रूप में जिस तरह से अधिक की तुलना में यह करने की जरूरत है कहा जाता है और कर सकते हैं स्क्रॉल करते समय पेज लगी। जॉन Resig से:

http://ejohn.org/blog/learning-from-twitter/

एक टाइमर है कि हर 150 एमएस या तो चलाता है उपयोग करने के लिए बहुत बेहतर - तरह कुछ:

var scrolled = false; 

window.onscroll = function() { 
    scrolled = true; 
} 

setInterval(function(){ 
    if (scrolled) { 
    scrolled = false; 
    // scrollFunction() 
    } 
}, 150); 

Answer 3

Jquery में आप विधि है .scrollTop()

http://api.jquery.com/scrolltop/

यह उदाहरण विंडो स्क्रॉल के साथ एक div स्क्रॉल बनाता है।

$(window).scroll(function(){    
     $("div").css("margin-top", $(window).scrollTop()) 
});