जावास्क्रिप्ट के साथ स्क्रॉलबार स्थिति कैसे प्राप्त करें?

Question

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

Answer 1

आप उपयोग कर सकते हैं element.scrollTopऔर element.scrollLeftक्रमशः ऊर्ध्वाधर और क्षैतिज ऑफसेट प्राप्त करने के लिए, जिसे स्क्रॉल किया गया है। यदि आप पूरे पृष्ठ की परवाह करते हैं तो elementहो सकता है document.body। यदि आपको प्रतिशत की आवश्यकता है तो आप इसकी तुलना कर सकते हैं element.offsetHeightऔर element.offsetWidth(फिर से, elementशरीर हो सकता है)।

Comments

आप कौन सा ब्राउज़र उपयोग कर रहे हैं? शरीर प्राप्त करना अलग-अलग ब्राउज़रों में अलग-अलग तरीके से किया जाता है ( elementऔर document.bodyसिर्फ उदाहरण थे)। देखें howtocreate.co.uk/tutorials/javascript/browserwindow जानकारी के लिए।

— मैक्स शॉबकेह

मुझे यह फ़ायरफ़ॉक्स 3.6 पर मुझे सही मूल्य देने के लिए मिला window.pageYOffset, लेकिन IE7 पर काम करने से कुछ नहीं मिल सकता। की कोशिश की window.pageYOffset, document.body.scrollTop, document.documentElement.scrollTop,element.scrollTop

— पॉल

स्क्रॉलटॉप ने मेरे लिए केवल तभी काम किया जब मैंने ब्रैकेट जोड़े ... $ ("। स्क्रॉलबॉडी")। स्क्रॉलटॉप ()

— maia

यदि आप 'विंडो' एलिमेंट के साथ काम कर रहे हैं, तो आप window.scrollY का उपयोग विंडो के बजाय कर सकते हैं। CrollTop

— Janis Jansen

मुझे लगता है कि स्क्रॉल स्थिति document.bodyअधिकांश आधुनिक ब्राउज़रों में सेट नहीं है - यह आमतौर पर document.documentElementअभी सेट है । Chrome के संक्रमण के लिए Bugs.chromium.org/p/chromium/issues/detail?id=157855 देखें ।

— fzzfzzfzz

Answer 2

मैंने ऐसा <div>क्रोम पर किया है।

एलिमेंट .scrollTop - स्क्रॉल के कारण टॉप में छिपा हुआ पिक्सेल है। बिना किसी स्क्रॉल के इसका मान 0 है।

एलिमेंट .scrollHeight - पूरे डिव का पिक्सल है।

element .clientHeight - वह पिक्सेल है जो आप अपने ब्राउज़र में देखते हैं।

var a = element.scrollTop;

स्थिति होगी।

var b = element.scrollHeight - element.clientHeight;

स्क्रॉलटॉप के लिए अधिकतम मूल्य होगा ।

var c = a / b;

स्क्रॉल का प्रतिशत [0 से 1 तक] होगा ।

Comments

धन्यवाद! शायद 0 से 1 तक नहीं, हालांकि, जब से आप वास्तव में तत्व के नीचे स्क्रॉल कर सकते हैं, आम तौर पर - सही?

यह लगभग सही है। var b के लिए आपको window.innerHeight घटाना चाहिए, element.clientHeight नहीं।

— काहल

Answer 3

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

दो पूर्णांक के साथ एक सरणी देता है- [स्क्रॉललाइट, स्क्रॉलटॉप]

Comments

एक उदाहरण के साथ इस फ़ंक्शन का उपयोग करने का तरीका दिखाना शानदार रहा होगा।

— user18490

मुझे लगता है कि आप इस lastscroll = getScroll () का उपयोग कर सकते हैं; window.scrollTo (lastscroll [0], lastscroll [1]);

— दिनेश राजन

महान काम करता है, लेकिन मैंने x और y कुंजियों के साथ किसी ऑब्जेक्ट में वापसी को बदल दिया क्योंकि यह मेरे लिए थोड़ा अधिक समझ में आता है।

— xd6_

@ User18490 की टिप्पणी के बाद संपादित किया गया।

— डेविड कैनिज़ो

ReferenceError: वेरिएबल नहीं पा सकते हैं: एलिमेंट

— जॉनी

Answer 4

ऐसी बात हे :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

Answer 5

2018 के लिए उत्तर :

चीजों को करने का सबसे अच्छा तरीका इंटर्सेशन ऑब्जर्वर एपीआई का उपयोग करना है ।

इंटरसेक्शन ऑब्जर्वर एपीआई एक लक्ष्य तत्व के चौराहे में पूर्वजों तत्व के साथ या शीर्ष-स्तरीय दस्तावेज़ के व्यूपोर्ट के साथ अतुल्यकालिक रूप से निरीक्षण करने का एक तरीका प्रदान करता है।

ऐतिहासिक रूप से, एक तत्व की दृश्यता का पता लगाना, या एक दूसरे के संबंध में दो तत्वों की सापेक्ष दृश्यता, एक मुश्किल काम है, जिसके लिए समाधान अविश्वसनीय हो गया है और ब्राउज़र को पैदा करने का खतरा है और उपयोगकर्ता सुस्त हो रहे हैं। दुर्भाग्य से, जैसा कि वेब परिपक्व हो गया है, इस तरह की जानकारी की आवश्यकता बढ़ी है। कई कारणों से अंतरंग जानकारी की आवश्यकता होती है, जैसे:

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

पिछले शामिल घटना संचालकों में प्रतिच्छेदन का पता लगाने को लागू करने और प्रत्येक तत्व प्रभावित के लिए आवश्यक जानकारी का निर्माण करने के लिए Element.getBoundingClientRect () जैसी कॉलिंग विधियों का उपयोग करता है। चूंकि यह सब कोड मुख्य धागे पर चलता है, इसलिए इनमें से एक भी प्रदर्शन की समस्या पैदा कर सकता है। जब कोई साइट इन परीक्षणों से भरी होती है, तो चीजें एकदम बदसूरत हो सकती हैं।

निम्नलिखित कोड उदाहरण देखें:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

अधिकांश आधुनिक ब्राउज़र IntersectionObserver का समर्थन करते हैं , लेकिन आपको पिछड़े-संगतता के लिए पॉलीफ़िल का उपयोग करना चाहिए ।

Answer 6

यदि आप पूरे पृष्ठ की देखभाल करते हैं। आप इसका उपयोग कर सकते हैं:

document.body.getBoundingClientRect().top

Comments

दस्तावेज़ का उपयोग करें। इसके बजाय

— डेनियल डेज़फौली

Answer 7

यदि आप jQuery का उपयोग कर रहे हैं तो आपके लिए एक सही कार्य है: .scrollTop ()

doc here -> http://api.jquery.com/scrollTop/

नोट: आप इस फ़ंक्शन का उपयोग स्थिति को पुनः प्राप्त या सेट करने के लिए कर सकते हैं।

इसे भी देखें: http://api.jquery.com/?s=scroll

Comments

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

— DaemonOfTheWest 23

अगर आप व्यक्तिगत रूप से पूछते हैं कि मुझे jQuery पसंद नहीं है और मैंने इस सवाल का जवाब नहीं दिया है, लेकिन वेनिला जेएस में पहले से ही अन्य साथियों द्वारा दिए गए उत्तर हैं तो फिर क्या समस्या है अगर किसी ने इस धागे में एक स्वादिष्ट मसाला जोड़ा है? (उन्होंने पहले ही उल्लेख किया है कि यदि आप jQuery का उपयोग कर रहे हैं)

— रविंद्र पायल

@ R01010010 ऐसा इसलिए है क्योंकि अब दिनों में JQuery बेकार और उलटफेर करने वाला है, JQuery के सभी फीचर्स वनीलाजेएस के साथ आसानी से लागू हो जाते हैं, आप भी JQuery के अंदर क्या हो जाते हैं, इस बात से आप वंचित रह जाते हैं, नई सुविधाओं के साथ, VanillsJS में, आप प्रोग्रामर के रूप में avaible, आप अपडेट नहीं करेंगे, उदाहरण के तौर पर , अब दिनों में VanillaJS नामक एक नया API आया है, जिसे पुराने XHR की जगह लिया गया है, अगर आप सिर्फ JQuery की दुनिया में थे तो कभी भी भ्रूण पर लाभ नहीं देखेंगे और jQuery.ajax () का उपयोग करना जारी रखेंगे। मेरी निजी राय है कि जो जारी रहे JQuery का उपयोग करना, क्योंकि उन्होंने सीखना बंद कर दिया है। इसके अलावा वेनिलाजेएस तेजी से वेनिला- js.com है

— जॉन

@JohnBalvinArias लाने के बारे में बात कर रहे हैं, यानी 11 या यहाँ तक कि एज क्या है?

— बेन

अगर मैं गलत हूं तो मुझे सुधारो, लेकिन "आधुनिक" यानी "और" अभी भी मोटे तौर पर उपयोग नहीं किया जाता है। अगर मैं jquery का उपयोग कर रहा था, तो मुझे मुश्किल से उस समय आगे बढ़ने के लिए प्रोत्साहित किया जाएगा

— Ben

Answer 8

यहां स्क्रॉल स्थिति प्राप्त करने का दूसरा तरीका है

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Answer 9

मुझे लगता है कि निम्नलिखित फ़ंक्शन स्क्रॉल निर्देशांक मान रखने में मदद कर सकते हैं:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

मुझे इस जवाब से थोड़ा बदलाव आया।