Kullanıcı jQuery ile div'in altına kaydırdığında algılama

Değişken miktarda içeriğe sahip bir div kutusu (flux denir) var. Bu divbox otomatik olarak ayarlanmış taşmaya sahip.

Şimdi, yapmaya çalıştığım şey, kullanım bu DIV kutusunun altına kaydırıldığında, sayfaya daha fazla içerik yüklemek, bunu nasıl yapacağımı biliyorum (içeriği yükle) ama nasıl yapacağımı bilmiyorum kullanıcı div etiketinin en altına ne zaman kaydırıldığını algılar mı? Bunu tüm sayfa için yapmak istersem .scrollTop alıp .height'tan çıkartırdım.

Ama bunu burada yapamıyorum?

.ScrollTop'u akıdan almayı denedim ve daha sonra iç olarak adlandırılan bir div içindeki tüm içeriği sarmalamayı denedim, ancak innerHeight'ı akı alırsam 564px (div yükseklik olarak 500'e ayarlanır) ve 'innner' yüksekliği div'in alt kısmında 564 derken 1064 ve scrolltop döndürür.

Ne yapabilirim?

Kullanabileceğiniz bazı özellikler / yöntemler vardır:

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

Böylece ilk iki mülkün toplamını alabilirsiniz ve son mülke eşit olduğunda, sona ulaştınız:

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

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

Düzenleme: 'bağla' değerini 'açık' olarak güncelledim:

JQuery 1.7'den itibaren .on () yöntemi, olay işleyicilerini bir belgeye iliştirmek için tercih edilen yöntemdir.

Pencerenizi kaydırdığınızda ve alttan gösterilen bir divın sonunda size bir uyarı veren bir çözüm buldum.

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

Bu örnekte, div ( .posts) bittiğinde aşağı kaydırırsanız , size bir uyarı verir.

Sorunun 5.5 yıl önce sorulmasına rağmen, bugünün UI / UX bağlamında hala daha önemlidir. Ve iki sentimi eklemek istiyorum.

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

Kaynak: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

Bazı öğeler, öğenin tam yüksekliğini kaydırmanıza izin vermez. Bu gibi durumlarda şunları kullanabilirsiniz:

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

Sadece ek bir not burada ben kaydırmak istiyorum sabit bir div için bir çözüm ararken buldum. Benim senaryom için ben div sonuna dolgu dikkate tercih ettim ki ben sonuna kadar vurabilir. Bu yüzden @ Dr.Molle'ın cevabına genişleyerek

$('#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');
    }
  });

Bu, dolgu ve kenarlıklar da dahil olmak üzere kesin konumu verecektir

bu benim için çalıştı

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

Bunu, taşma ya da kaydırma olarak taşan bir div'de kullanmanız gerekiyorsa, bunun gibi bir şey ihtiyacınız olan şey olabilir.

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

Ben pervane scrollHeight yuvarlak gibi görünüyor, ya da belki de daha az 1 kapalı olmasına neden başka bir neden tavan gerekli bulundu.

Math.round () işlevini kullanmıyorsanız, tarayıcı penceresinde yakınlaştırma olduğunda bazı durumlarda Dr.Molle tarafından önerilen çözüm çalışmaz.

Örneğin $ (this) .scrollTop () + $ (this) .innerHeight () = 600

$ (this) [0] .scrollHeight verim = 599.99998

600> = 599.99998 başarısız.

İşte doğru kod:

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

Katı bir koşula ihtiyacınız yoksa bazı ekstra kenar boşluğu pikselleri de ekleyebilirsiniz.

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');
        }
    })
});

Basit DOM kullanımında koşulu kontrol edebilirsiniz

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

eğer doğruysa sonuna ulaştın.

Herkes alırsa scrollHeightolarak undefined, daha sonra elemanların 1 cihazmda belirleyin:mob_top_menu[0].scrollHeight

herhangi bir yardım olup olmadığından emin değilim ama bunu nasıl yaparım.

Pencereden daha büyük bir dizin paneli var ve bu dizin ulaşılana kadar kaydırma izin. Sonra yerine sabitlerim. Sayfanın üst kısmına doğru kaydırdığınızda işlem tersine çevrilir.

Saygılarımızla.

<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>

Bu neredeyse 6 yıl önce sorulmuş olmasına rağmen, UX tasarımında hala sıcak konu, herhangi bir acemi kullanmak isterse burada demo snippet'i var

$(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>

Çocuklar bu zoom sorununun çözümü, ihtiyacınız olması durumunda tüm zoom seviyelerinde çalışır:

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

$(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
    }
});

Bu github koddur.

İşte başka bir sürüm.

Anahtar kodu, taşma: kaydırma özelliğini kullanarak kaydırma bölümünü içeren div'ın yüksekliği olarak girdi alan işlev kaydırma çubuğu () işlevidir. Üstte veya altta olduğu gibi üstten 5px veya alttan 10px yakındır. Aksi takdirde çok hassastır. 10 piksel minimum civarında görünüyor. Alt yüksekliği elde etmek için div yüksekliğine 10 eklediğini göreceksiniz. 5px'in işe yarayabileceğini varsayıyorum, kapsamlı test yapmadım. YMMV. scrollHeight, bu durumda 400 piksel olan div öğesinin görüntülenen yüksekliğini değil, iç kaydırma alanının yüksekliğini döndürür.

<?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>';

?>