Bir kullanıcının sayfanın altına kaydırılıp kaydırılmadığını tespit etmem gerekiyor. Sayfanın altındaysa, altına yeni içerik eklediğimde, bunları otomatik olarak yeni altına kaydırırım. Eğer altta değilse, önceki içeriği sayfada daha yüksek okuyorlar, bu yüzden bulundukları yerde kalmak istedikleri için onları otomatik kaydırmak istemiyorum.

Bir kullanıcının sayfanın altına kaydırılıp kaydırılmadığını veya sayfada yukarı kaydırıldığını nasıl tespit edebilirim?

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

Demoyu izleyin

Tüm büyük tarayıcılar desteği için güncellenmiş kod (IE10 ve IE11 dahil)

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

Geçerli kabul edilen yanıtla ilgili sorun window.scrollYIE'de bulunmamasıdır.

İşte bir alıntı MDN'yi scrollY ilgili:

Tarayıcılar arası uyumluluk için window.scrollY yerine window.pageYOffset kullanın.

Ve çalışan bir pasaj:

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>

Mac için not

@ Raphaël'in yorumuna dayanarak, küçük bir ofset nedeniyle mac'ta bir sorun vardı.
Aşağıdaki güncellenmiş koşul çalışır:

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

Daha fazla test etme şansım olmadı, eğer birisi bu konu hakkında yorum yapabilirse harika olacak.

Kabul edilen cevap benim için işe yaramadı. Bu şunu yaptı:

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

Eski tarayıcıları (IE9) desteklemek istiyorsanız window.pageYOffset, biraz daha iyi desteği olan takma adı kullanın .

Bir cevap arıyordum ama kesin bir cevap bulamadım. İşte bu cevap anında en yeni Firefox, IE ve Chrome ile çalışan saf bir javascript çözümü:

// 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);

Bu çalışıyor

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

Eski tarayıcıları (IE9) desteklemek istiyorsanız window.scrollY yerine window.pageYOffset yazın

Buna yeni bakmaya başladım ve buradaki cevaplar bana yardımcı oldu, bu yüzden bunun için teşekkürler. Kod IE7 geri tüm yol güvenli böylece biraz genişlettik:

Umarım bu birisi için yararlı olur.

Burada, bir Keman var;)

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

Bir height: 100%kapsayıcı üzerinde ayar yapıyorsanız <div id="wrapper">, aşağıdaki kod çalışır (Chrome'da test edilmiştir):

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

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

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

Çünkü sınır durumları çözecektir Bu cevap, bu pageYOffsetise doubleederken innerHeightve offsetHeightvardırlong tarayıcı size bilgi verir, bu nedenle zaman bir piksel kısa olabilir. Örneğin: sayfanın altında

doğru window.innerHeight = 10.2

doğru window.pageYOffset = 5.4

doğru document.body.offsetHeight = 15.6

Sonra hesaplamamız şöyle olur: 10 + 5.4> = 16 olan yanlış

Bunu düzeltmek Math.ceiliçinpageYOffset değer .

Umarım yardımcı olur.

jquery seviyorsanız

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

Jquery'nin sonsuz kaydırmasına bakabilirsiniz:

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

Jquery kütüphanesini kullanmaya istekli olduğunuzu varsayarak ve katı bir saf JS yöntemi ummadığınızı varsayarak, kulağa ne istediğini yapar.

Şaşırtıcı bir şekilde hiçbir çözüm benim için işe yaramadı. Sanırım bunun nedeni cssdağınıktı ve bodykullanırken tüm içeriğin etrafına sarılmadı height: 100%(nedenini henüz bilmiyorum). Ancak bir çözüm ararken iyi bir şey buldum ... temelde aynı, ama belki de bakmaya değer - aynı yavaş yapıyorsa, daha az destekleniyorsa veya benzeri bir şey varsa programlama konusunda yeniyim o ...

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

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

}

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

Bu kod benim için Firefox ve IE'de de çalıştı.

İşlev kod pasajını katıştırılmış kullanma defaultViewve kullanma 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>

Pencerenin yüksekliği ve kaydırma üstünün birleşik sonucunun gövdeden daha büyük olup olmadığını kontrol edebilirsiniz.

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

Sistematik olarak doğru XPath'ı bilmediğim bir bileşeni (uzun hikaye, bu yüzden sadece oynamak) aramak için bir yol (Java'da) bulmak zorunda kaldım. Az önce belirttiğim gibi, bir bileşen ararken aşağı kaydırmam ve bileşen bulunduğunda veya sayfanın altına ulaşıldığında durmam gerekiyordu.

Aşağıdaki kod snippet'i sayfanın altına doğru kaydırmayı kontrol eder:

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

Bu arada, bu kod pasajı yürütülmeden önce pencere ekranı kaplar.

Kabul edilen cevap benim için işe yaramadı. Bu şunu yaptı:

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

Benim için işe yarayan iki çözüm buldum:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })

Ve diğer:

  window.addEventListener('scroll', function(e) {
    if (
      window.innerHeight + window.pageYOffset ===
      document.documentElement.offsetHeight
    ) {
      console.log('You are at the bottom')
    }
  })