पता लगाना जब उपयोगकर्ता jQuery के साथ div के नीचे स्क्रॉल करता है

Question

मेरे पास एक div बॉक्स है (जिसे फ्लक्स कहा जाता है) अंदर सामग्री की एक चर राशि के साथ। इस डिवबॉक्स में ऑटो के लिए ओवरफ्लो सेट है।

अब, मैं जो करने की कोशिश कर रहा हूं, वह है, जब उपयोग इस DIV- बॉक्स के नीचे स्क्रॉल करता है, तो पृष्ठ में अधिक सामग्री लोड करें, मुझे पता है कि यह कैसे करना है (सामग्री लोड करें) लेकिन मुझे नहीं पता कि कैसे पता लगाएं कि उपयोगकर्ता ने div टैग के नीचे स्क्रॉल कब किया है? अगर मैं इसे पूरे पेज के लिए करना चाहता था, तो मैं .scrollTop लेता और इसे .height से घटाता।

लेकिन मैं यहाँ ऐसा करने के लिए प्रतीत नहीं कर सकते?

मैंने फ्लक्स से .scrollTop लेने की कोशिश की है, और फिर इनव्यू नामक एक div के अंदर सभी सामग्री को लपेटता है, लेकिन अगर मैं फ्लक्स के इनरहाइट को लेता हूं तो यह 564px रिटर्न देता है (div की ऊंचाई 500 है) और 'innner' की ऊंचाई यह 1064 देता है, और स्क्रॉलटॉप, जब div के निचले भाग में 564 कहते हैं।

मैं क्या कर सकता हूँ?

Answer 1

कुछ गुण / विधियाँ हैं जिनका आप उपयोग कर सकते हैं:

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

तो आप पहले दो संपत्तियों का योग ले सकते हैं, और जब यह अंतिम संपत्ति के बराबर होता है, तो आप अंत तक पहुंच गए हैं:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

संपादित करें: मैंने 'बाइंड' को 'ऑन' के अनुसार अपडेट किया है:

JQuery 1.7 के रूप में, .on () विधि इवेंट हैंडलर को एक दस्तावेज़ में संलग्न करने के लिए पसंदीदा तरीका है।

Comments

यह बाध्यकारी तब करेगा जब DOM यह सुनिश्चित करने के लिए तैयार होगा कि # प्रवाह-तत्व पहले से उपलब्ध है।

— डॉ। मोलले

आपको बाइंड के बजाय ऑन का उपयोग करके उत्तर देना चाहिए, बाइंड ऑन के पक्ष में पदावनत है

— ncubica

नोट: जब कोई उपयोगकर्ता अपने ब्राउज़र पर ज़ूम स्तर का उपयोग कर रहा है, तो यह काम नहीं कर सकता है। ज़ूम innerHeight()दशमलव की रिपोर्ट करने का कारण बनता है। एक उपयोगकर्ता के मामले में की राशि ज़ूम आउट करके, scrollTop()और innerHeight()हमेशा कम से कम का एक अंश कम हो जाएगा scrollHeight। मैंने 20px का बफर ज़ोन जोड़ना समाप्त कर दिया। परिणामी सशर्त if(el.scrollTop() + el.innerHeight() >= el[0].scrollHeight - 20)जहां elसमान था $(this)।

— निक

यह अब तक का सबसे अच्छा जवाब है जिसने मेरे लिए बहुत अच्छा काम किया। धन्यवाद

— आशीष यादव

यह अब काम नहीं कर रहा है, क्या आप कृपया पुष्टि कर सकते हैं कि यह काम क्यों नहीं कर रहा है, धन्यवाद

— उमैर शाह यूसुफ़ज़ई

Answer 2

मुझे एक समाधान मिला कि जब आप अपनी विंडो को स्क्रॉल करते हैं और नीचे से दिखाए गए डिव का अंत आपको अलर्ट देता है।

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

इस उदाहरण में यदि आप div ( .posts) समाप्त होने पर स्क्रॉल करते हैं तो यह आपको अलर्ट देता है।

Comments

इसके लिए धन्यवाद, लेकिन जब मैं उस div के निचले हिस्से तक पहुँचता हूँ तो मैं div को चेतन कैसे बना सकता हूँ? जब आप स्क्रॉल करते हैं तो उस div के शीर्ष का पता लगाते हैं, फिर चेतन भी करते हैं। बस यहाँ की तरह इस वेबसाइट पर lazada.com.ph/ साइडबार व्यवहार को हल करें आशा है कि आप मेरी मदद कर सकते हैं :)

— एलिसा रेयेस

यह एक जादू की तरह काम करता है लेकिन समस्या यह है कि अलर्ट को दो बार निष्पादित किया जाता है, इसलिए यदि आपके पास किसी फ़ंक्शन का कॉल है, तो इसे दो बार निष्पादित किया जाएगा

— Afaf

@ 1616 var running = falseइससे पहले मैंने एक चर घोषित किया। सशर्त के अंदर, मैं if(!running) { running = true; // and continue logic } इस तरह से जांचता हूं कि इसे केवल एक बार बुलाया जाता है! जब AJAX पूरा हो जाता है, तो सेट करेंrunning = false;

— याकूब रैचुआ

यह खिड़की के बारे में है, लेकिन सवाल div के बारे में है।

— अलेक्जेंडर वोल्कोव

Answer 3

हालांकि यह सवाल 5.5 साल पहले पूछा गया था, फिर भी यह आज के यूआई / यूएक्स संदर्भ में प्रासंगिक से अधिक है। और मैं अपने दो सेंट जोड़ना चाहूंगा।

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

स्रोत: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

कुछ तत्व आपको तत्व की पूरी ऊंचाई को स्क्रॉल करने की अनुमति नहीं देंगे। उन मामलों में आप उपयोग कर सकते हैं:

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

Comments

यह वह समाधान है जिसकी आप तलाश कर रहे हैं यदि आप jQuery का उपयोग नहीं कर रहे हैं।

— पेट्टर पेटर्सन 16

ईवेंट हैंडलर है?

— अलेक्जेंडर वोल्कोव

@AlexanderVolkov onscroll संबंधित घटना है।

— सोच रहा

Answer 4

बस एक अतिरिक्त नोट यहाँ के रूप में मैं यह पाया जब एक निश्चित div है कि मैं स्क्रॉल करना चाहते हैं के लिए एक समाधान की तलाश में। मेरे परिदृश्य के लिए मैंने पाया कि इसका श्रेय div पर पैडिंग को ध्यान में रखना है ताकि मैं अंत में सटीक रूप से हिट कर सकूं। इसलिए @ Dr.Molle के उत्तर पर विस्तार करते हुए मैं निम्नलिखित जोड़ता हूं

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

यह आपको पैडिंग और बॉर्डर सहित सटीक स्थान देगा

Answer 5

हालांकि यह मेरे लिए काम किया

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

Answer 6

यदि आपको एक ऐसे डिव पर उपयोग करने की आवश्यकता है जिसमें छिपा या स्क्रॉल के रूप में अतिप्रवाह-वाई है, तो कुछ इस तरह हो सकता है कि आपको क्या चाहिए।

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

मैंने पाया कि साइल की आवश्यकता थी क्योंकि प्रोप स्क्रॉलहाइट को गोल लगता है, या शायद किसी अन्य कारण से यह 1 से कम हो सकता है।

Answer 7

यदि आप Math.round () का उपयोग नहीं कर रहे हैं, तो Dr.Molle द्वारा सुझाए गए समाधान को कुछ मामलों में काम नहीं करेगा जब ब्राउज़र विंडो में ज़ूम होता है।

उदाहरण के लिए $ (यह) .scrollTop () + $ (यह) .innerHeight () = 600

$ (यह) [0] .SrollHeight पैदावार = 599.99998

600> = 599.99998 विफल।

यहाँ सही कोड है:

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

यदि आपको सख्त शर्त की आवश्यकता नहीं है, तो आप कुछ अतिरिक्त मार्जिन पिक्सेल भी जोड़ सकते हैं

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

Answer 8

साधारण डोम उपयोग में आप स्थिति की जांच कर सकते हैं

element.scrollTop + element.clientHeight == element.scrollHeight

अगर सच है तो तुम अंत तक पहुंच गए हो।

Answer 9

अगर किसी को भी मिलता scrollHeightहै undefined, तो तत्वों का चयन करें 1mob_top_menu[0].scrollHeight

Answer 10

यकीन नहीं है कि यह किसी भी मदद है, लेकिन यह है कि मैं यह कैसे करते हैं।

मेरे पास एक इंडेक्स पैनल है जो खिड़की से बड़ा है और मैं इसे इस इंडेक्स तक पहुंचने तक स्क्रॉल करने देता हूं। फिर मैं इसे स्थिति में ठीक करता हूं। पृष्ठ के शीर्ष की ओर स्क्रॉल करते ही प्रक्रिया उलट जाती है।

सादर।

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>

Answer 11

हालांकि यह लगभग 6 साल पहले पूछा गया था, यूएक्स डिजाइन में अभी भी गर्म विषय, यहां डेमो स्निपेट है यदि कोई नौसिखिया उपयोग करना चाहता था

$(function() {

  /* this is only for demonstration purpose */
  var t = $('.posts').html(),
    c = 1,
    scroll_enabled = true;

  function load_ajax() {

    /* call ajax here... on success enable scroll  */
    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);

    /*again enable loading on scroll... */
    scroll_enabled = true;

  }


  $(window).bind('scroll', function() {
    if (scroll_enabled) {

      /* if 90% scrolled */
    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {

        /* load ajax content */
        scroll_enabled = false;  
        load_ajax();
      }

    }

  });

});

h4 {
  color: red;
  font-size: 36px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>

Answer 12

दोस्तों यह ज़ूम समस्या का समाधान है, यह सभी ज़ूम स्तरों के साथ काम करता है, यदि आपको इसकी आवश्यकता है:

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }

Answer 13

$(window).on("scroll", function() {
    //get height of the (browser) window aka viewport
    var scrollHeight = $(document).height();
    // get height of the document 
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // code to run when scroll to bottom of the page
    }
});

यह जीथब पर कोड है।

Answer 14

यहाँ एक और संस्करण है।

कुंजी कोड फंक्शन स्क्रोलर () है, जो इनपुट को स्क्रॉलिंग वाले div की ऊंचाई के रूप में लेता है, जो ओवरफ्लो का उपयोग करता है: स्क्रॉल। यह ऊपर से 5px या नीचे से ऊपर की ओर 10px होता है। अन्यथा यह बहुत संवेदनशील है। ऐसा लगता है कि 10px न्यूनतम के बारे में है। आप देखेंगे कि यह नीचे की ऊँचाई प्राप्त करने के लिए div ऊंचाई में 10 जोड़ देता है। मुझे लगता है कि 5 पीएक्स काम कर सकते हैं, मैंने बड़े पैमाने पर परीक्षण नहीं किया। YMMV। स्क्रॉलहाइट आंतरिक स्क्रॉलिंग क्षेत्र की ऊंचाई लौटाता है, न कि div की प्रदर्शित ऊंचाई, जो इस मामले में 400px है।

<?php

$scrolling_area_height=400;
echo '
<script type="text/javascript">
          function scroller(ourheight) {
            var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
            if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
                alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
            }
            if (ourtop <= (5)) {
                alert(\'Reached the top\');
            }
          }
</script>

<style type="text/css">
.scroller { 
            display:block;
            float:left;
            top:10px;
            left:10px;
            height:'.$scrolling_area_height.';
            border:1px solid red;
            width:200px;
            overflow:scroll; 
        }
</style>

$content="your content here";

<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
        scroller(ourheight);"
        >'.$content.'
</div>';

?>

Comments

-1 क्योंकि jpascript + css कोड को php से जनरेट करना खराब प्रैक्टिस है (हार्ड मेंटेन करना, कोई रियूजेबिलिटी नहीं, कोई वेबसाइट ऑप्टिमाइजेशन नहीं)। इसके अलावा @Alexander मिलर द्वारा बताए गए अनुसार 10px ऑफसेट को पैडिंग को ध्यान में रखकर तय किया जा सकता है। इस कोड का उपयोग करने पर विचार करने वाले किसी भी व्यक्ति को दो बार सोचना चाहिए ...

— कापिटिन विटबार्ड