jQuery scrollTop मान का क्या अर्थ है?

Question

मैं एक अनंत स्क्रॉल को लागू करने के लिए scrollTop विधि का उपयोग कर कुछ jquery कोड पर काम कर रहा हूं (कृपया, jQuery प्लगइन्स का सुझाव न दें, मुझे पता है कि वे मौजूद हैं) और मुझे समझ में नहीं आता कि यह मान क्या है।

इस बेला को देखते हुए: https://jsfiddle.net/ve8s5fdx/

<div id="outter"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
</div> 
<div id="scroll"></div> 

#outter { 
    height: 100px; 
    width: 100%; 
    overflow-y:auto; 
} 

.inner { 
    height: 150px; 
    width: 50%; 
    border: dashed black 2px; 
    background-color: grey; 
} 

ऐसा नहीं है कि मान 0 जब स्क्रॉलबार तत्व के सबसे ऊपर स्थित है समझ में आता है, लेकिन क्यों "208" जब यह तल पर है? #outter div 100px उच्च है, इसकी सामग्री 300px से थोड़ा अधिक है।

Answer 1

क्या @Rory McCrossan ने कहा। यदि आप 100px नीचे स्क्रॉल करते हैं, तो .scrollTop 100 प्रदर्शित करेगा। scrollTop विंडो और तत्व के बीच की जगह को माप देगा। इसलिए इससे कोई फर्क नहीं पड़ता कि आपका तत्व कितना ऊंचा है, यह हमेशा उस स्थान से ऊपर होगा जो मायने रखता है।

चूंकि आपके .inner में सीएसएस-नियम box-sizing: border-box; गुम है, सीमा को div के बाहर जोड़ा जाएगा, और यह 2px चौड़ा है। आपके मामले में कौन सा मतलब है कि प्रत्येक .inner तत्व 154px उच्च है। आपके पास 2 उनमें से हैं, इसलिए .outer की सामग्री 308px है।

आपका .outer -element 100px उच्च है इसलिए 100px हमेशा दिखाई देगा। तो जब आपकी खिड़की बहुत नीचे स्क्रॉल हो जाती है, तो scrollTop 308px - 100px = 208px प्रदर्शित करता है।

यदि आप 50px की ऊंचाई पर अपना .outer बदलते हैं, तो स्क्रॉलटॉप नीचे स्क्रॉल होने पर 258px प्रदर्शित करेगा।

Answer 2

$.scrollTop:

लंबवत स्क्रॉल स्थिति पिक्सल कि स्क्रॉल क्षेत्र के ऊपर दृश्य से छिपा रहे हैं की संख्या के रूप में ही है। स्क्रॉल पट्टी पर बहुत ऊपर, या अगर तत्व स्क्रॉल नहीं है, तो यह संख्या हो जाएगा 0.

अपने बेला निरीक्षण हैं, तो आप देख सकते हैं कि अपने दो .inner रों 308 की एक संयुक्त ऊंचाई है पिक्सल। आपका बाहरी (स्क्रॉलिंग) div 100 पीएक्स लंबा है।

तो अपने .scrollTop(), पिक्सल कि स्क्रॉल क्षेत्रtotal inner height - visible height, या 208 पिक्सल है ऊपर दृश्य से छिपा रहे हैं की संख्या।