स्क्रॉल का पता लगाने के लिए क्रॉस-ब्राउजर विधि ब्राउज़र विंडो का टॉप

Question

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

Answer 1

function getScrollTop(){ 
    if(typeof pageYOffset!= 'undefined'){ 
     //most browsers except IE before #9 
     return pageYOffset; 
    } 
    else{ 
     var B= document.body; //IE 'quirks' 
     var D= document.documentElement; //IE with doctype 
     D= (D.clientHeight)? D: B; 
     return D.scrollTop; 
    } 
} 

alert(getScrollTop()) 

Answer 2

आप सभी मुसीबत ऐसे jQuery या mootools है कि एक लाइन (पार ब्राउज़र) mootools में अपनी $ ('तत्व') में इन सभी मूल्यों की गणना करता है के रूप में एक ढांचे का उपयोग बचाने के लिए getTop()।; jquery में आपको आयाम नामक एक प्लगइन की आवश्यकता होगी यदि मुझे सही ढंग से याद है, हालांकि अधिकांश समय ढांचे के बिना भी आप element.getScrollTop() का उपयोग कर सकते हैं; उस तत्व के लिए पूर्ण सीएसएस विशेषता: तुम क्या आवश्यकता होगी समस्या सिर्फ IE7 पर और इस गणना से कम है कुछ हद तक गाड़ी है, क्योंकि यह नहीं उदाहरण के लिए विचार में तत्व की स्थिति को मान ले नहीं करता है अगर आप एक स्थिति मिल पाने के लिए गणना, आप एक पूरे JavaScript लाइब्रेरी शामिल करने के लिए नहीं करना चाहते हैं उस तत्व

Answer 3

की मूल तत्व पर किया जाता है तो आप अक्सर बिट्स आप एक से चाहते निकाल सकते हैं।

उदाहरण के लिए, इस अनिवार्य रूप से कैसे jQuery implements एक क्रॉस-ब्राउज़र पुस्तक है (ऊपर | बाएं):

function getScroll(method, element) { 
    // The passed in `method` value should be 'Top' or 'Left' 
    method = 'scroll' + method; 
    return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] || 
    (browserSupportsBoxModel && document.documentElement[method]) || 
    document.body[method] 
) : element[method]; 
} 
getScroll('Top', element); 
getScroll('Left', element); 

नोट: आप देखेंगे कि इसके बाद के संस्करण कोड एक browserSupportsBoxModel चर जो अपरिभाषित है शामिल हैं। jQuery defines this अस्थायी रूप से पृष्ठ पर एक div जोड़कर और फिर कुछ विशेषताओं को मापने के लिए यह निर्धारित करने के लिए कि ब्राउज़र सही ढंग से बॉक्स मॉडल लागू करता है या नहीं। जैसा कि आप आईई के लिए इस ध्वज जांच की कल्पना कर सकते हैं। विशेष रूप से, यह IE 6 or 7 in quirks mode के लिए जांचता है। चूंकि पता लगाने के बजाय जटिल है, मैंने इसे आपके लिए एक अभ्यास के रूप में छोड़ दिया है ;-), मान लीजिए कि आप पहले से ही browserfeaturedetection अपने कोड में कहीं और इस्तेमाल कर चुके हैं।

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

Answer 4

YUI 2.8.1 कोड इस करता है:

function getDocumentScrollTop(doc) 
{ 
    doc = doc || document; 

    //doc.body.scrollTop is IE quirkmode only 
    return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); 
} 

मैं jQuery 1.4.2 कोड (एक सा मनुष्य के लिए अनुवाद) और मैं मान समझा यह ठीक करता है इस बारे में सोच:

function getDocumentScrollTop(doc) 
{ 
    doc = doc || document; 
    win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9 

    result = 0; 
    if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined') 
     result = win.pageYOffset; 
    else 
     result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
       document.body.scrollTop; 

    return result; 
} 

दुर्भाग्यवश jQuery.support.boxModel का मूल्य निकालने लगभग असंभव है क्योंकि आप करने के लिए होगा दस्तावेज़ में एक अस्थायी बाल तत्व जोड़ें और एक ही परीक्षण jQuery करता है।

Answer 5

function getSize(method) { 
    return document.documentElement[method] || document.body[method]; 
} 
getSize("scrollTop"); 

Answer 6

या सिर्फ सरल रूप में:

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 

Answer 7

मैं इसके लिए किया गया काफी देर जानते के बाद से इस सूत्र अद्यतन किया गया था, लेकिन यह एक समारोह मुझे लगता है कि डेवलपर्स के मूल तत्व को खोजने के लिए अनुमति देता है बनाया है कि वास्तव में मेजबान एक काम कर रहा है "scrollTop" संपत्ति। मैक ओएस एक्स (10.9 के लिए क्रोम 42 और फ़ायरफ़ॉक्स 37 पर परीक्षण किया गया।5):

function getScrollRoot(){ 
    var html = document.documentElement, body = document.body, 
     cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position 
     root; 

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1; 
    // find root by checking which scrollTop has a value larger than the cache. 
    root = (html.scrollTop !== cacheTop) ? html : body; 

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value 

    return root; // return the scrolling root element 
} 

// USAGE: when page is ready: create a global variable that calls this function. 

var scrollRoot = getScrollRoot(); 

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top 
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window 

मुझे आशा है कि आपको यह उपयोगी लगेगा! चीयर्स।

Answer 8

मैं window.scrollY || document.documentElement.scrollTop का उपयोग कर रहा हूं।

window.scrollY आईईएस को छोड़कर सभी ब्राउज़रों को शामिल करता है।
document.documentElement.scrollTop आईई शामिल हैं।

Answer 9

यह आईई 5 से IE11 तक अच्छी तरह से काम करता है। यह सभी प्रमुख नए ब्राउज़रों का भी समर्थन करता है।

var scrollTop = (document.documentElement && document.documentElement.scrollTop) || 
       (document.body.scrollTop) || (document.scrollingElement);