जावास्क्रिप्ट: यह कैसे पता लगाया जाए कि ब्राउज़र विंडो को नीचे तक स्क्रॉल किया गया है?

Question

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

यदि कोई उपयोगकर्ता पृष्ठ के नीचे तक स्क्रॉल किया जाता है या यदि उन्होंने पृष्ठ पर उच्च स्क्रॉल किया है, तो मैं कैसे पता लगा सकता हूं?

Comments

यह एक कोणीय 6 में काम किया है -> stackoverflow.com/a/42547136/621951

— गुने गुल्लेकिन

Answer 1

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page
    }
};

डेमो देखें

Comments

काम नहीं करता है जब html / शरीर के तत्व 100% पर सेट होते हैं (ताकि शरीर पूरे व्यूपोर्ट की ऊँचाई को भर दे)

— ग्रोड्रिग्ज़

IE document.documentElement.scrollTopके window.scrollYलिए उपयोग करें । यह निश्चित नहीं है कि, यदि कोई हो, IE के संस्करण window.scrollY।

— बटांडवा

क्रोमियम संस्करण में काम नहीं करता है 47.0.2526.73 उबंटू 14.04 पर निर्मित, प्राथमिक ओएस 0.3.2 (64-बिट) पर चल रहा है

— के - एसओ में विषाक्तता बढ़ रही है।

मैंने ऑफसेट के स्थान पर document.body.scrollHeight का उपयोग किया (मेरे मामले में, ऑफसेटहाइट हमेशा छोटा था कि window.innerHeight)

— ओलिवर

@KarlMorrison आप अपने ब्राउज़र के साथ बाउंटी से सम्मानित उत्तर (@Dekel द्वारा) आज़मा सकते हैं?

— बसज

Answer 2

सभी प्रमुख ब्राउज़रों के समर्थन के लिए अद्यतन कोड (IE10 और IE11 शामिल हैं)

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

वर्तमान स्वीकृत उत्तर के साथ समस्या यह है कि window.scrollY IE में उपलब्ध नहीं है।

यहाँ स्क्रॉल के बारे में mdn से एक उद्धरण है :

क्रॉस-ब्राउज़र अनुकूलता के लिए, window.pageYOffset के बजाय window.scrollY का उपयोग करें।

और एक काम स्निपेट:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

मैक के लिए ध्यान दें

@ राफेल की टिप्पणी के आधार पर, एक छोटी सी ऑफसेट के कारण मैक में समस्या थी।
निम्नलिखित अद्यतन स्थिति काम करती है:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

मुझे इसके आगे परीक्षण करने का मौका नहीं मिला, अगर कोई इस विशिष्ट मुद्दे के बारे में टिप्पणी कर सकता है तो यह बहुत अच्छा होगा।

Comments

एंड्रॉइड के लिए एफएफ, क्रोम, आईई 10, क्रोम पर काम करने की पुष्टि की। शुक्रिया @Dekel!

— बसज

अजीब बात है क्योंकि यह लग सकता है, केवल मेरे ब्राउज़र में मैं 1 पीएक्स से छोटा हूं, और इसलिए स्थिति ट्रिगर नहीं होती है। निश्चित नहीं कि क्यों, इसे काम करने के लिए अतिरिक्त कुछ px जोड़ना पड़ा।

— शारजील अहमद

मैक कंप्यूटरों पर, एक छोटी सी ऑफसेट (~ 1px) की वजह से नीचे की शर्त पूरी नहीं हुई है, हमने इस तरह की स्थिति को अपडेट किया है(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

— राफेल

thx @Dekel! वास्तव में, हमें पता चलता है कि window.pageYOffset मैक पर एक फ्लोट है। हमारा अंतिम समाधान है (window.innerHeight + Math.ceil(window.pageYOffset + 1)) >= document.body.offsetHeight।

— राफेल

उन मामलों के लिए काम नहीं करता जहां शरीर की एक शैली है जो ऊंचाई को 100% तक

— बढ़ाती है

Answer 3

स्वीकृत जवाब मेरे काम नहीं आया। यह किया:

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      console.log("Bottom of page");
    }
};

यदि आप पुराने ब्राउज़र (IE9) का समर्थन करना चाहते हैं, तो उस उपनाम का उपयोग करें window.pageYOffsetजिसमें थोड़ा बेहतर समर्थन है।

Comments

IE10 / 11 में काम नहीं करता है। Dekel के जवाब (चेक stackoverflow.com/questions/9439725/... आईई समर्थन के लिए)। मेरे लिए काम किया

— Herr_Schwabullek

अन्य उत्तरों ने कंसोल.लॉग () को हर बार जब मैंने स्क्रॉल किया, तब ही नहीं जब मैं पृष्ठ के निचले भाग पर था। इस जवाब ने मेरे लिए क्रोम पर काम किया।

— 21

यदि आप window.scrollY से छुटकारा पा लेते हैं, जो कि या किनारे में काम नहीं करता है, तो यह एक अच्छा जवाब है। इसके साथ बदलें: (window.innerHeight + window.pageYOffset)> = document.body.scrollHeight

— colemerrick

Answer 4

मैं एक उत्तर के लिए खोज रहा था, लेकिन एक सटीक नहीं मिला। यहाँ एक शुद्ध जावास्क्रिप्ट समाधान है जो इस उत्तर के समय नवीनतम फ़ायरफ़ॉक्स, IE और क्रोम के साथ काम करता है:

// document.body.scrollTop alone should do the job but that actually works only in case of Chrome.
// With IE and Firefox it also works sometimes (seemingly with very simple pages where you have
// only a <pre> or something like that) but I don't know when. This hack seems to work always.
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

// Grodriguez's fix for scrollHeight:
// accounting for cases where html/body are set to height:100%
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;

// >= is needed because if the horizontal scrollbar is visible then window.innerHeight includes
// it and in that case the left side of the equation is somewhat greater.
var scrolledToBottom = (scrollTop + window.innerHeight) >= scrollHeight;

// As a bonus: how to scroll to the bottom programmatically by keeping the horizontal scrollpos:
// Since window.innerHeight includes the height of the horizontal scrollbar when it is visible
// the correct vertical scrollTop would be
// scrollHeight-window.innerHeight+sizeof(horizontal_scrollbar)
// Since we don't know the visibility/size of the horizontal scrollbar
// we scroll to scrollHeight that exceeds the value of the
// desired scrollTop but it seems to scroll to the bottom with all browsers
// without problems even when the horizontal scrollbar is visible.
var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
window.scrollTo(scrollLeft, scrollHeight);

Comments

यह लगभग मेरे लिए काम करता है, लेकिन मुझे उन मामलों के लिए ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)बस उपयोग करने के बजाय document.body.scrollHeighthtml / शरीर को ऊंचाई पर सेट करने के लिए उपयोग करना

— पड़ता है

@Grodriguez जानकारी के लिए धन्यवाद! यह भविष्य में हमारे लिए काम आ सकता है! :-)

— पेसटॉर्पिस्टी

Answer 5

यह काम

window.onscroll = function() {

    // @var int totalPageHeight
    var totalPageHeight = document.body.scrollHeight; 

    // @var int scrollPoint
    var scrollPoint = window.scrollY + window.innerHeight;

    // check if we hit the bottom of the page
    if(scrollPoint >= totalPageHeight)
    {
        console.log("at the bottom");
    }
}

यदि आप पुराने ब्राउज़रों (IE9) का समर्थन करना चाहते हैं तो window.scrollY को window.pageYOffset से बदलें

Comments

2019 में प्रतिक्रिया के साथ यह काम। शरीर 100% ऊंचाई के साथ काम करता है, html 100% ऊंचाई के साथ। क्रोम, सफारी, फ़ायरफ़ॉक्स, एज के साथ काम करें।

— क्रोधित कीवी

बस एक नोट: नामकरण को बदल दिया जाना चाहिए - चर को स्विच किया जाना चाहिए। क्योंकि स्क्रॉलहाइट कुल पृष्ठ की ऊंचाई दिखाता है, और कुल मिलाकर वर्तमान स्क्रॉल बिंदु दिखाता है, इसलिए यह थोड़ा भ्रमित है।

— व्लादिमीर मार्टन

Answer 6

मैंने अभी इसे देखना शुरू किया है और यहां के जवाबों ने मेरी मदद की, इसलिए इसके लिए धन्यवाद। मैंने थोड़ा विस्तार किया है ताकि कोड IE7 पर वापस आ जाए।

आशा है कि यह किसी के लिए उपयोगी साबित होगा।

यहाँ, एक बेला है;)

    <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 100px;
            border-bottom: 1px solid #ddd;
        }

        div:nth-child(even) {
            background: #CCC
        }

        div:nth-child(odd) {
            background: #FFF
        }

    </style>
</head>

<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

<script type="text/javascript">
console.log("Doc Height = " + document.body.offsetHeight);
console.log("win Height = " + document.documentElement.clientHeight);
window.onscroll = function (ev) {
    var docHeight = document.body.offsetHeight;
    docHeight = docHeight == undefined ? window.document.documentElement.scrollHeight : docHeight;

    var winheight = window.innerHeight;
    winheight = winheight == undefined ? document.documentElement.clientHeight : winheight;

    var scrollpoint = window.scrollY;
    scrollpoint = scrollpoint == undefined ? window.document.documentElement.scrollTop : scrollpoint;

    if ((scrollpoint + winheight) >= docHeight) {
        alert("you're at the bottom");
    }
};
</script>
</html>

Comments

कामों की तरह। लेकिन यह बहुत सटीक नहीं है। यह मानता है कि जब तक आप नीचे के लगभग 16px के भीतर हैं तब तक इसे नीचे तक स्क्रॉल किया जाता है।

— पीटर हॉल

Answer 7

यदि आप height: 100%कुछ कंटेनर में सेटिंग कर रहे हैं <div id="wrapper">, तो निम्न कोड काम करता है (क्रोम में परीक्षण किया गया है):

var wrapper = document.getElementById('wrapper');

wrapper.onscroll = function (evt) {
  if (wrapper.scrollTop + window.innerHeight >= wrapper.scrollHeight) {
    console.log('reached bottom!');
  }
}

Answer 8

window.onscroll = function(ev) {
    if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
        alert("you're at the bottom of the page");
    }
};

यह उत्तर बढ़त मामलों ठीक कर देंगे, इस वजह से है pageYOffsetहै double, जबकि innerHeightऔर offsetHeightकर रहे हैं long, इसलिए जब ब्राउज़र आप जानकारी देता है, तो आप एक पिक्सेल कम हो सकता है। उदाहरण के लिए: हमारे पास पृष्ठ के नीचे

सच window.innerHeight = 10.2

सच window.pageYOffset = 5.4

सच document.body.offsetHeight = 15.6

हमारी गणना तब बन जाती है: 10 + 5.4> = 16 जो झूठी है

इसे ठीक करने के लिए हम मूल्य Math.ceilपर कर सकते हैं pageYOffset।

उम्मीद है की वो मदद करदे।

Answer 9

यदि आप jquery से प्यार करते हैं

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // doSomethingHere();
  }
});

Comments

और जो jQuery से प्यार नहीं करता है ...

— जोश हबदा

@ जोशदाबास ब्राउजर्स

— टोनी मिशेल क्यूबेट

Answer 10

आप jquery के अनंत स्क्रॉल में देख सकते हैं:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

ऐसा लगता है कि यह वही करता है जो आप पूछ रहे हैं, यह मानते हुए कि आप jquery पुस्तकालय का उपयोग करने के लिए तैयार हैं और सख्त शुद्ध JS विधि की उम्मीद नहीं कर रहे हैं।

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— bobthedeveloper

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

— dcastro

@Hatsjoem इसके अलावा, मेटा से : "जब संदर्भित पुस्तकालय एक प्रसिद्ध, स्थिर स्थान पर होता है, तो इस तरह का उत्तर आम तौर पर खराब उत्तर होता है, लेकिन एक उत्तर फिर भी : यह कहता है कि" इसका उपयोग करें। "

— dcastro

इसके अलावा, यदि अनन्त स्क्रॉल इस URL को बदल देता है, तो Google संभवत: अभी भी मौजूद रहेगा। बिंदु उस प्लगइन का उपयोग करने के लिए है ताकि लिंक मर जाए, बस Google खोज jquery अनंत स्क्रॉल। आपको शायद वही मिलेगा जो आपको चाहिए।

— काई क्विंग

Answer 11

आश्चर्यजनक रूप से मेरे लिए कोई भी समाधान काम नहीं आया। मुझे लगता है कि ऐसा इसलिए है क्योंकि मेरे साथ cssगड़बड़ी हुई थी, और bodyउपयोग height: 100%करते समय सभी सामग्री के चारों ओर लपेट नहीं किया था (पता नहीं क्यों अभी तक)। हालांकि, एक समाधान की तलाश करते हुए मैं कुछ अच्छी तरह से आया हूं ... मूल रूप से एक ही है, लेकिन शायद यह देखने लायक है - मैं प्रोग्रामिंग में नया हूं इसलिए अगर यह एक ही धीमी गति से कर रहा है, तो कम समर्थित है या ऐसा कुछ है उस...

window.onscroll = function(evt) {
  var check = (Element.getBoundingClientRect().bottom - window.innerHeight <= 0) ? true : false;
  if (check) { console.log("You're at the bottom!"); }
};

Answer 12

$(document).ready(function(){
    $('.NameOfYourDiv').on('scroll',chk_scroll);
});

function chk_scroll(e)
{
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
    {
        alert("scrolled to the bottom");
    }

}

Comments

एक अलग नजरिया रखना। लेकिन स्वीकृत उत्तर सुनिश्चित करने के लिए बेहतर है

— जिहान झांग

Answer 13

const handleScroll = () => {
    if (Math.round(window.scrollY + window.innerHeight) >= Math.round(document.body.scrollHeight)) {
        onScroll();
    }
};

इस कोड ने मेरे लिए फ़ायरफ़ॉक्स और IE में भी काम किया।

Answer 14

प्रयोग defaultViewऔर documentElementकार्यात्मक कोड स्निपेट के साथ एम्बेडेड:

const { defaultView } = document;
const { documentElement } = document;
const handler = evt => requestAnimationFrame(() => {
  const hitBottom = (() => (defaultView.innerHeight + defaultView.pageYOffset) >= documentElement.offsetHeight)();
  hitBottom
    ? console.log('yep')
    : console.log('nope')
});
document.addEventListener('scroll', handler);

<pre style="height:110vh;background-color:fuchsia">scroll down</pre>

Answer 15

आप जांच सकते हैं कि खिड़की की ऊंचाई और स्क्रॉल शीर्ष का संयुक्त परिणाम शरीर की तुलना में बड़ा है या नहीं

if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {}

Answer 16

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

निम्नलिखित कोड स्निपेट पृष्ठ के नीचे स्क्रॉल को नियंत्रित करता है:

JavascriptExecutor js = (JavascriptExecutor) driver;
boolean found = false;
long currOffset = 0;
long oldOffset = 0;
do
{
    oldOffset = currOffset;
    // LOOP to seek the component using several xpath regexes removed
    js.executeScript("window.scrollBy(0, 100)");
    currOffset = (Long)js.executeScript("var offset = window.window.pageYOffset; return offset;");
} while (!found && (currOffset != oldOffset));

वैसे, इस कोड स्निपेट को निष्पादित करने से पहले विंडो को अधिकतम किया जाता है।

Answer 17

स्वीकृत जवाब मेरे काम नहीं आया। यह किया:

const element = document.createElement('div');
document.body.appendChild(element);
document.addEventListener('scroll', () => {
    const viewportHeight = window.innerHeight;
    const distance = element.getBoundingClientRect().top;
    if (Math.floor(distance) <= viewportHeight) {
        console.log('yep')
    } else {
        console.log('nope')
    }
})