जांचें कि क्या किसी उपयोगकर्ता ने नीचे स्क्रॉल किया है

Question

मैं एक पेजिंग सिस्टम (फेसबुक की तरह) बना रहा हूं जहां उपयोगकर्ता नीचे स्क्रॉल करने पर सामग्री लोड करता है। मैं यह करने के लिए सबसे अच्छा तरीका कल्पना करता हूं कि जब उपयोगकर्ता पृष्ठ के निचले भाग पर होता है और अधिक पोस्ट लोड करने के लिए अजाक्स क्वेरी चलाता है।

एकमात्र समस्या यह है कि मुझे पता नहीं है कि उपयोगकर्ता को jQuery के साथ पृष्ठ के निचले भाग तक स्क्रॉल करना है या नहीं। कोई विचार?

मुझे यह जांचने का एक तरीका खोजने की आवश्यकता है कि उपयोगकर्ता ने jQuery के साथ पृष्ठ के नीचे स्क्रॉल किया है या नहीं।

Comments

यह मज़ेदार है, मैं यह पता लगाने की कोशिश कर रहा हूं कि नीचे स्क्रॉल करने पर कौन सा फ़ंक्शन कहा जा रहा है, इसलिए मैं इस "फीचर" को रोक सकता हूं।

— एंडोलिथ

React.js समाधान के लिए, यह लिंक मदद कर सकता है: stackoverflow.com/a/53158893/4265546

— raksheetbhat

Answer 1

इस तरह .scroll()घटना पर प्रयोग करें window:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

आप इसे यहाँ परीक्षण कर सकते हैं , यह विंडो का शीर्ष स्क्रॉल लेता है, इसलिए यह कितना नीचे स्क्रॉल किया गया है, दृश्य विंडो की ऊँचाई जोड़ता है और जाँचता है कि क्या समग्र सामग्री ( document) की ऊँचाई के बराबर है । यदि आप इसके बजाय जांचना चाहते हैं कि उपयोगकर्ता नीचे के पास है, तो यह कुछ इस तरह दिखाई देगा:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

आप यहां उस संस्करण का परीक्षण कर सकते हैं , बस इसे समायोजित कर सकते हैं कि100 नीचे से जो भी पिक्सेल आप पर ट्रिगर करना चाहते हैं।

Comments

हमेशा की तरह तुम मुझसे पहले वहाँ पहुँच जाओ। वैसे भी, ओपी के लिए, यदि आपके पास पदों का एक कंटेनर है, तो "विंडो" के बजाय आईडी का उपयोग करें, इसके अलावा, आप अंतिम .height () को स्क्रॉल करने के लिए बदलना चाह सकते हैं

— ईसाई

फ़ायरफ़ॉक्स कॉल अलर्ट ("नीचे!"); कई बार (क्रोम और सफारी के साथ ठीक काम करता है)

— मार्को माताराज़ी

यह थोड़े छोटी गाड़ी है, अगर आप console.log()सतर्क रहने के बजाय इसे कभी-कभी कमांड दोहराते हैं।

— जुरगेन पॉल

@KevinVella वेला अच्छा संयोजन इसे अंडरस्कोर उपयोगिता में _.debounce () के साथ उपयोग करने के लिए है जब तक उपयोगकर्ता ने स्क्रॉल करना बंद न कर दिया हो - underscorejs.org/#debounce -

— JohnnyFaldo

@NickCraver क्या कोई शुद्ध जेएस कार्यान्वयन उपलब्ध है?

— डेव्सफोर्ड

Answer 2

निक क्रेवर का जवाब ठीक काम करता है, उस मुद्दे को छोड़ दें जो $(document).height()ब्राउज़र द्वारा भिन्न होता है।

इसे सभी ब्राउज़रों पर काम करने के लिए, जेम्स पादोलसे के इस फ़ंक्शन का उपयोग करें :

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

के स्थान पर $(document).height(), ताकि अंतिम कोड है:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Comments

उन्होंने थोड़े संकुचित संस्करण फ़ंक्शन के साथ अद्यतन किया है getDocHeight () {var D = document; वापसी Math.max (D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight); }

— आकर्षित किया

जब मैं शीर्ष पर पहुँचता हूँ, तो नीचे (Chrome) नहीं।

— डेमियन रोश

इसके minबजाय इसका उपयोग करना बेहतर हो सकता है max, खासकर अगर मार्जिन कुछ भी हो, तो उपयोगकर्ता को स्क्रॉल करने से रोकने के लिए जो आपको लगता है कि पृष्ठ के नीचे है।

— सोलोमन यूको

Answer 3

मुझे बिल्कुल यकीन नहीं है कि यह अभी तक क्यों पोस्ट नहीं किया गया है, लेकिन एमडीएन से प्रलेखन के अनुसार , देशी जावास्क्रिप्ट गुणों का उपयोग करके सबसे सरल तरीका है:

element.scrollHeight - element.scrollTop === element.clientHeight

जब आप किसी भी स्क्रॉल करने योग्य तत्व के निचले भाग पर होते हैं, तब वापस लौटता है। तो बस जावास्क्रिप्ट का उपयोग कर:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightब्राउज़रों में व्यापक समर्थन है, यानी 8 से अधिक सटीक, जबकि दोनों clientHeightऔर scrollTopसभी द्वारा समर्थित हैं। यहां तक ​​कि 6. यह सुरक्षित पार ब्राउज़र होना चाहिए।

Comments

ध्यान दें कि कुछ स्थितियों में ऐसा नहीं हो सकता है। फ़ायरफ़ॉक्स 47 एक textarea क्लाइंटहाइट को 239 के रूप में रिपोर्ट करता है जबकि उपरोक्त समीकरण 253 देता है जब नीचे स्क्रॉल किया जाता है। शायद पैडिंग / बॉर्डर या कुछ और इसे प्रभावित कर रहा है? किसी भी तरह से, कुछ wiggle कमरे को जोड़ने से चोट नहीं पहुंचेगी, जैसे var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );। यह किसी फ़ील्ड को स्वतः स्क्रॉल करने के लिए उपयोगी होता है, यदि पहले से ही नीचे हो (ताकि उपयोगकर्ता मैन्युअल रूप से अपनी जगह खोए बिना किसी रियलटाइम लॉग के विशिष्ट भाग की जांच कर सके)।

— बीजोर

मैं यह जोड़ना चाहूंगा कि झूठे नकारात्मक को वापस करना संभव है क्योंकि एक पक्ष एक छोटे से दशमलव को वापस कर सकता है जबकि दूसरा पक्ष पूरी संख्या (जैसे। 200.181819304947और 200) देता है। मैंने इसके Math.floor()साथ सौदा करने में मदद की, लेकिन मुझे नहीं पता कि यह कितना विश्वसनीय होगा।

— हन्ना

मेरे लिए, यह क्रॉस ब्राउज़र काम नहीं करता है। मुझे फ़ायरफ़ॉक्स की तुलना में क्रोम पर पूरी तरह से अलग परिणाम मिलते हैं।

— तद्ज

मैंने इसे <body> एलिमेंट पर आज़माया, और यह फायरिंग तब होती है जब ब्राउज़र को TOP पर स्क्रॉल किया जाता है, नीचे नहीं।

— क्रिस सोबोलेवस्की

Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(आपके परिस्थितियों के लिए उपयुक्त जो भी पिक्सेल सहिष्णुता है, उसके साथ 3.0 बदलें)। यह तरीका है क्योंकि (ए) clientHeight, scrollTopऔर clientHeightसभी गोल हैं जो संभावित रूप से 3px त्रुटि की ओर ले जा सकते हैं यदि सभी संरेखित करें, (बी) 3 पिक्सेल उपयोगकर्ता को शायद ही दिखाई दे, तो उपयोगकर्ता सोच सकता है कि आपकी साइट के साथ कुछ गलत है जब वे "सोचते हैं" तो वे पृष्ठ के निचले भाग में होते हैं जब वास्तव में वे नहीं होते हैं, और (सी) कुछ उपकरणों (विशेष रूप से मूस वाले) को स्क्रॉल करते समय अजीब व्यवहार हो सकता है।

— जैक गिफिन

Answer 4

निक के समाधान का उपयोग करने वाले और बार-बार अलर्ट / ईवेंट फायरिंग करने वालों के लिए, आप अलर्ट उदाहरण के ऊपर कोड की एक पंक्ति जोड़ सकते हैं:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

इसका मतलब यह है कि कोड केवल पहली बार फायर करेगा जब आप दस्तावेज़ के नीचे 100px के भीतर होंगे। यदि आप बैक अप को स्क्रॉल करते हैं तो यह दोबारा नहीं होगा और आप निक के कोड का उपयोग कर रहे हैं, इसके आधार पर यह उपयोगी नहीं हो सकता है।

Comments

मैंने अभी टिप्पणी की है और कहा है कि कोड की वह पंक्ति कहाँ से प्रासंगिक है किसी और के उत्तर के लिए लेकिन मंशा के लिए +1!

— नैट-विल्किंस

क्षमा करें, मैं (और अभी भी नहीं देख सकता) उत्तर के लिए एक टिप्पणी कैसे जोड़ सकता हूं (जैसे मैं यहां हूं)?

— टिम कारर

जब तक आपको अधिक प्रतिनिधि नहीं मिलते तब तक नए उपयोगकर्ता पोस्ट में एक टिप्पणी नहीं जोड़ सकते।

— नैट-विल्किंस

अगर आप उस भिन्न को डाल सकते हैं तो पहले बाहर की तरफ देखें यदि वह परीक्षण जो परिवर्तन आप चाहते थे कि स्क्रिप्ट मौजूद थी, कहे कि एक वर्ग एक div पर लागू किया गया है। यह दूसरा नेस्टेड होगा यदि नहीं चला तो पहले ही चला लें।

— 1934286

मैं पूरी विंडो के बजाय विशेष div आईडी का चयन कैसे कर सकता हूं?

— जेम्स स्मिथ

Answer 5

निक क्रैवर से उत्कृष्ट स्वीकार किए गए उत्तर के लिए, आप स्क्रॉल ईवेंट को थ्रॉटल कर सकते हैं, ताकि इसे इतनी बार फायर न किया जाए कि ब्राउज़र प्रदर्शन :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

Comments

यह शायद बताया जाना चाहिए कि इसके लिए अंडरस्कोर की आवश्यकता है। js: underscorejs.org । यह एक बहुत अच्छा बिंदु है, हालांकि। गंभीर प्रदर्शन समस्याओं से बचने के लिए स्क्रॉल ईवेंट को हमेशा बहुत अधिक थ्रॉटल किया जाना चाहिए।

— जूड ओसबोर्न

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

— डेसपेयर का ग्रास

यह वास्तव में एक साफ जोड़ है! मैं एक और सुधार के बारे में सोच सकता हूं। यदि उपयोगकर्ता स्क्रॉल करना जारी रखता है तो वर्तमान में वह फ़ंक्शन जो ऊंचाई की जांच नहीं करता है। यदि यह एक समस्या है (जैसे कि आप फ़ंक्शन को ट्रिगर करना चाहते हैं जब उपयोगकर्ता स्क्रॉल किए बिना आधे रास्ते को नीचे रख देता है) तो आप आसानी से सुनिश्चित कर सकते हैं कि चुने गए अंतराल के दौरान कई कॉल को प्रतिबंधित करते हुए फ़ंक्शन वास्तव में कॉल किया जाता है। यहाँ यह दिखाने के लिए एक जिस्ट है। gist.github.com/datacarl/7029558

— datacarl

क्या? एक साधारण गणना को रोकने के लिए मशीनरी का भार लागू करें? मैं यह नहीं देखता कि सब पर अधिक कुशल कैसे है

— रामबेटिनो

Answer 6

आईओएस 6 सफारी मोबाइल पर काम करने के लिए निक क्रेवर के जवाब को थोड़ा संशोधित करने की आवश्यकता है और यह होना चाहिए:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

बदल रहा है $ (विंडो) .height () के लिए window.innerHeight क्योंकि जब पता बार छिपा हुआ एक अतिरिक्त 60px खिड़की की ऊंचाई को जोड़ा गया है, लेकिन प्रयोग कर रहे हैं किया जाना चाहिए $(window).height()है नहीं इस परिवर्तन को दिखाने, जबकि का उपयोग कर window.innerHeightकरता है।

नोट : window.innerHeightसंपत्ति में क्षैतिज स्क्रॉलबार की ऊंचाई (यदि यह प्रदान की गई है) भी शामिल है, $(window).height()जिसके विपरीत क्षैतिज स्क्रॉलबार की ऊंचाई शामिल नहीं होगी। यह मोबाइल सफारी में कोई समस्या नहीं है, लेकिन अन्य ब्राउज़रों या मोबाइल सफारी के भविष्य के संस्करणों में अप्रत्याशित व्यवहार का कारण बन सकता है। सबसे आम उपयोग के मामलों के लिए इसे ठीक ==करना बदल >=सकता है।

window.innerHeightसंपत्ति के बारे में यहाँ और पढ़ें

Comments

window.innerHeight ने जो मुझे धन्यवाद देने की कोशिश की उसके लिए मैंने और अधिक समझदारी दिखाई!

— अमीर 5000

स्क्रॉल के बाद शेष ऊंचाई कैसे प्राप्त करें?

— ओपीवी

Answer 7

यहाँ एक काफी सरल तरीका है

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

उदाहरण

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

elmएक तत्व कहां से लिया गया है document.getElementById।

Answer 8

यहाँ एक कोड है जो आपके कोड को डीबग करने में आपकी सहायता करेगा, मैंने उपरोक्त उत्तरों का परीक्षण किया और पाया कि वे छोटे हैं। मेरे पास Chrome, IE, Firefox, IPad (Safari) पर अनुवर्ती परीक्षण हैं। मेरे पास कोई अन्य परीक्षण करने के लिए स्थापित नहीं है ...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

एक सरल समाधान हो सकता है, लेकिन मैंने उस बिंदु पर रोक दिया जिस पर यह काम किया था

यदि आपको अभी भी कुछ दुष्ट ब्राउज़र की समस्याएँ हैं, तो आपको डीबग करने में मदद करने के लिए कुछ कोड यहाँ दिए गए हैं:

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var details = "";
         details += '<b>Document</b><br />';
         details += 'clientHeight:' + docElement.clientHeight + '<br />';
         details += 'clientTop:' + docElement.clientTop + '<br />';
         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
         details += 'scrollTop:' + docElement.scrollTop + '<br />';

         var winElement = $(window)[0];
         details += '<b>Window</b><br />';
         details += 'innerHeight:' + winElement.innerHeight + '<br />';
         details += 'outerHeight:' + winElement.outerHeight + '<br />';
         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
         details += 'screenTop:' + winElement.screenTop + '<br />';
         details += 'screenY:' + winElement.screenY + '<br />';
         details += 'scrollY:' + winElement.scrollY + '<br />';

         details += '<b>End of page</b><br />';
         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
         details += 'End of Page? ';
         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
             details += 'YES';
         } else {
             details += 'NO';
         }

         $('#test').html(details);
      });
   });
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

मुझे उम्मीद है कि यह किसी को कुछ समय बचाएगा।

Comments

वेनिला js के लिए सर्वश्रेष्ठ उत्तर, कोई jQuery समाधान नहीं। उपयोगvar docElement = document.documentElement; var winElement = window

— जपरेली

यह 2019 में। इसके बजाय winElement.pageYOffsetआप भी उपयोग कर सकते हैं winElement.scrollY।

— नोएल अब्राहम

Answer 9

कृपया इस उत्तर की जाँच करें

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

आप यह footerHeight - document.body.offsetHeightदेखने के लिए कर सकते हैं कि आप पाद लेख के पास हैं या पाद लेख तक पहुँच गए हैं

Answer 10

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

यह तत्व के नीचे दूरी स्क्रॉल बार की गणना करता है। बराबर 0, यदि स्क्रॉल बार नीचे तक पहुंच गया है।

Comments

मैंने निम्नलिखित किया और त्रुटिपूर्ण काम किया। धन्यवाद। var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;

— जिंमांसी

Answer 11

यह मेरा दो सेंट है:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Comments

कोशिश की यो आपके समाधान का उपयोग करते हैं, यह ठीक काम करता है लेकिन ऐसे मामलों में जब तत्व में पैडिंग होती है - यह काम नहीं करता है क्योंकि यह तत्व की शुद्ध ऊंचाई की गणना करता है, बिना पैडिंग सहित, इसे हल करने के लिए मैंने इसे बदल दिया $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight

— तारास चेर्नटा

Answer 12

क्रॉस-ब्राउज़र और डिबॉन्शिंग (सुंदर अच्छा प्रदर्शन ) के साथ शुद्ध जेएस

var CheckIfScrollBottom = debouncer(function() {
    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
       console.log('Bottom!');
    }
},500);

document.addEventListener('scroll',CheckIfScrollBottom);

function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

डेमो: http://jsbin.com/geherovena/edit?js,output

पुनश्च: Debouncer, getScrollXY, getDocHeightमेरे द्वारा नहीं लिखा

मैं सिर्फ यह दिखाता हूं कि इसका काम कैसा है, और मैं कैसे करूंगा

Comments

उत्तम। फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया

— एर्लीसर वास्केज़

मुझे निम्न त्रुटि मिलती है: अपेक्षित 3 तर्क, लेकिन मिला 2. एक तर्क 'c' प्रदान नहीं किया गया था।

— सोबेर

Answer 13

सादे जेएस में मेरा समाधान:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
    if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
        alert('Bottom');
    }
});

#el{
  width:400px;
  height:100px;
  overflow-y:scroll;
}

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Answer 14

मैच की स्थिति के लिए यह प्रयास करें अगर नीचे की ओर स्क्रॉल करें

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Answer 15

निक अपने ठीक जवाब देता है लेकिन आपके पास ऐसे कार्य होंगे जो स्क्रॉल करते समय अपने आप को दोहराते हैं या यदि उपयोगकर्ता ने खिड़की को ज़ूम किया है तो यह बिल्कुल भी काम नहीं करेगा। मैं सिर्फ एक आसान तय के साथ आया था। पहली ऊंचाई के आसपास गणित।

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

Answer 16

आप निम्न कोड आज़मा सकते हैं,

$("#dashboard-scroll").scroll(function(){
    var ele = document.getElementById('dashboard-scroll');
    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
       console.log('at the bottom of the scroll');
    }
});

Answer 17

एक स्क्रॉल करने योग्य तत्व (यानी नहीं window) पर जांच करने पर यह सटीक परिणाम देता है :

// `element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
    // Element scrolled to bottom

offsetHeightकिसी तत्व की वास्तविक दृश्यमान ऊंचाई (पैडिंग, मार्जिन और स्क्रॉलबार सहित ) देनी चाहिए , और अदृश्य (अतिप्रवाहित) क्षेत्रों सहित किसी तत्व scrollHeightकी संपूर्ण ऊंचाई है।

jQueryके .outerHeight()जे एस के समान परिणाम देना चाहिए .offsetHeightMDN में प्रलेखन के लिए - offsetHeightअपने पार ब्राउज़र समर्थन के बारे में स्पष्ट नहीं है। अधिक विकल्पों को कवर करने के लिए, यह अधिक पूर्ण है:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
   // scrolled to bottom
}

Comments

Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightMath.floor()

— स्क्रॉलटॉप के

Answer 18

ये सभी समाधान फ़ायरफ़ॉक्स और क्रोम पर मेरे लिए काम नहीं करते हैं, इसलिए मैं माइल्स ओ'कीफ़ और मेडर ओम्फ़र जैसे कस्टम फ़ंक्शन का उपयोग करता हूं :

function getDocHeight()
{
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Answer 19

यहाँ मेरे दो सेंट हैं क्योंकि स्वीकृत उत्तर मेरे लिए काम नहीं करता था।

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;

Answer 20

स्क्रॉल ईवेंट को सुनने के बजाय, इंट्रसेशन ऑब्जर्वर का उपयोग करना चेक करने के लिए सबसे सस्ता है यदि अंतिम तत्व व्यूपोर्ट पर दिखाई दे रहा था (इसका मतलब है कि उपयोगकर्ता नीचे स्क्रॉल किया गया था)। इसने पॉलीफिल के साथ IE7 के लिए भी समर्थन किया ।

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Comments

इन्टरसेक्शन ऑब्जर्वर के साथ समस्या यह है कि यदि शुरुआती विंडो अपेक्षाकृत छोटा है (स्क्रॉलबार के बिना छवियों को लाने से पहले बुनियादी लेआउट कहें) पर्यवेक्षक कॉलबैक तुरंत चालू हो जाता है। स्क्रॉल श्रोता वास्तव में स्क्रॉल करने के लिए किसी व्यक्ति की प्रतीक्षा करता है। और स्क्रॉलबार छवियों के पहले बैच के सामने नहीं आएगा और इत्यादि प्राप्त किया जाएगा। इसलिए इन्टरसेक्शन ऑब्जर्वर सभी एक समाधान में नहीं है।

— एलेक्स

@ एलेक्स आप .observe(...)किसी ईवेंट श्रोता पर कॉल कर सकते हैं जैसे जब उपयोगकर्ता आपके स्क्रॉल कंटेनर को मँडराता / छूता है तो यह तुरंत ट्रिगर नहीं होगा।

— स्टेफन्सआरी

Answer 21

मुझे JQuery के बिना दृष्टिकोण दिखाते हैं। सरल जेएस समारोह:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

लघु उदाहरण इसका उपयोग कैसे करें:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

Comments

इस सवाल का जवाब नहीं है। सवाल यह था कि यह कैसे पता लगाया जाए कि उपयोगकर्ताओं ने खिड़की को नीचे तक सभी तरह से स्क्रॉल किया है। यदि कोई विशेष तत्व दृश्य में है तो आपका कोड जाँच रहा है।

— पीटर हॉल

Answer 22

मैंने @ddanone उत्तर का उपयोग किया और अजाक्स कॉल जोड़ा।

$('#mydiv').on('scroll', function(){
  function infiniScroll(this);
});

function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );

if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
    console.log('bottom found');
    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
        myAjaxCall();
    }
}

}

Answer 23

निक के जवाब के बार-बार अलर्ट को रोकने के लिए

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Answer 24

यदि आप कॉल करते हैं तो Google Chrome पृष्ठ की पूरी ऊंचाई देता है $(window).height()

इसके बजाय, window.innerHeightअपनी विंडो की ऊंचाई को पुनः प्राप्त करने के लिए उपयोग करें। आवश्यक जाँच होनी चाहिए:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Answer 25

जाहिर तौर पर मेरे लिए जो काम किया गया वह 'शरीर' था और इस तरह 'विंडो' नहीं:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

क्रॉस-ब्राउज़र संगतता उपयोग के लिए:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

और फिर $ (दस्तावेज़) के बजाय .height () फ़ंक्शन को कॉल करें getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

नीचे उपयोग के लिए पास:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });