यह पता लगाने के द्वारा कि उपयोगकर्ता ने कितना स्क्रॉल किया है

Question

मेरे पास पृष्ठ पर एक छोटे संस्करण पर क्लिक करते समय उपयोगकर्ताओं को पूर्ण रिज़ॉल्यूशन चित्र दिखाने के लिए, मेरी वेबसाइट पर एक छवि पॉप-अप क्षमता है।

यह वर्तमान CSS है कि यह स्थिति है:

div#enlargedImgWrapper { 
    position: absolute; 
    top: 30px; 
    left: 55px; 
    z-index: 999; 
} 

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

नोट: मैं कुछ छवियों के रूप में position: fixed; उपयोग करने के लिए स्क्रीन से अधिक लंबी हो सकता है नहीं करना चाहते, तो मैं उन छवि के साथ स्क्रॉल करने में सक्षम होना चाहता हूँ।

मेरा विचार जे एस का उपयोग करने के top मान बदलने के लिए किया गया था:

var scrollValue = ???; 
document.getElementById('enlargedImgWrapper').style.top = scrollValue+30 + 'px'; 

मैं कैसे कितना उपयोगकर्ता नीचे पेज (var scrollValue) स्क्रॉल किया गया है द्वारा पता लगा सकते हैं?
या क्या ऐसा करने के लिए 'बेहतर' तरीका है?

संपादित करें: यदि संभव हो तो मैं jQuery के बिना ऐसा करना चाहता हूं।

Answer 1

शुद्ध जावास्क्रिप्ट scrollTop और scrollLeft उपयोग करता है:

var scrollLeft = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; 
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; 

https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

jQuery संस्करण:

var scrollLeft = $(window).scrollLeft() ; 
var scrollTop = $(window).scrollTop() ; 

आपको यह चाहिए कि:

document.getElementById('enlargedImgWrapper').style.top = (scrollTop+30) + 'px'; 

Answer 2

document.getElementById('enlargedImgWrapper').scrollTop; 

MSDN

यह संपत्ति के मूल्य वर्तमान ऊर्ध्वाधर स्क्रॉल सीमा के भीतर सामग्री की भरपाई के बराबर होती है। यद्यपि आप संपत्ति को किसी भी मान पर सेट कर सकते हैं, यदि आप 0 से कम मान निर्दिष्ट करते हैं, तो संपत्ति 0 पर सेट हो जाती है। यदि आप अधिकतम मान से अधिक मान असाइन करते हैं, तो संपत्ति अधिकतम मान पर सेट की जाती है।

आप इस संपत्ति को इनलाइन सेट कर सकते हैं, लेकिन परिणाम लोड होने पर असंगत हो सकते हैं।

scrollTop property