ฉันต้องการตรวจสอบว่าผู้ใช้เลื่อนไปที่ด้านล่างของหน้า หากพวกเขาอยู่ที่ด้านล่างของหน้าเมื่อฉันเพิ่มเนื้อหาใหม่ที่ด้านล่างฉันจะเลื่อนพวกเขาไปที่ด้านล่างใหม่โดยอัตโนมัติ หากพวกเขาไม่ได้อยู่ที่ด้านล่างพวกเขากำลังอ่านเนื้อหาก่อนหน้าสูงขึ้นในหน้าดังนั้นฉันไม่ต้องการเลื่อนพวกเขาโดยอัตโนมัติเพราะพวกเขาต้องการที่จะอยู่ที่พวกเขาอยู่

ฉันจะตรวจสอบได้อย่างไรว่าผู้ใช้เลื่อนไปที่ด้านล่างของหน้าหรือหากพวกเขาเลื่อนขึ้นที่สูงขึ้นบนหน้า?

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

ดูตัวอย่าง

รหัสที่อัปเดตสำหรับการสนับสนุนเบราว์เซอร์ที่สำคัญทั้งหมด (รวมถึง 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เกี่ยวกับ scrolly:

สำหรับความเข้ากันได้ของเบราว์เซอร์ให้ใช้ 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>

หมายเหตุสำหรับ mac

จากความคิดเห็นของ @ Raphaëlมีปัญหาใน mac เนื่องจากออฟเซตขนาดเล็ก
เงื่อนไขที่อัพเดตต่อไปนี้ใช้งานได้:

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

ฉันไม่ได้มีโอกาสทดสอบเพิ่มเติมหากใครบางคนสามารถแสดงความคิดเห็นเกี่ยวกับปัญหาเฉพาะนี้ได้จะดีมาก

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน สิ่งนี้ทำ:

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ที่รองรับได้ดีกว่า

ฉันค้นหาคำตอบ แต่ไม่พบคำตอบที่แน่นอน นี่คือโซลูชันจาวาสคริปต์ที่ทำงานร่วมกับ Firefox, IE และ Chrome ล่าสุดในเวลาที่ตอบคำถามนี้:

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

วิธีนี้ใช้ได้ผล

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

ฉันเพิ่งเริ่มดูสิ่งนี้และคำตอบที่นี่ช่วยฉันได้ขอบคุณมาก ฉันได้ขยายเพิ่มเล็กน้อยเพื่อให้รหัสปลอดภัยตลอดทางจนถึง 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>

หากคุณกำลังตั้งค่าheight: 100%บนคอนเทนเนอร์บางส่วน<div id="wrapper">รหัสต่อไปนี้ใช้งานได้ (ทดสอบใน Chrome):

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

คำตอบนี้จะแก้ไขกรณีขอบนี้เป็นเพราะ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ค่า

หวังว่าจะช่วย

ถ้าคุณรัก jQuery

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

คุณสามารถดูการเลื่อนแบบไม่มีที่สิ้นสุดของ jquery:

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

ซึ่งดูเหมือนว่ามันจะเป็นสิ่งที่คุณขอสมมติว่าคุณยินดีที่จะใช้ห้องสมุด jquery และไม่หวังว่าจะใช้วิธีการ JS อย่างแท้จริง

น่าแปลกที่ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉัน ฉันคิดว่าเป็นเพราะฉัน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!"); }
};

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

รหัสนี้ใช้ได้สำหรับฉันใน Firefox และ IE เช่นกัน

การใช้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>

คุณสามารถตรวจสอบว่าผลรวมของความสูงของหน้าต่างและด้านบนของสกรอลนั้นใหญ่กว่าของร่างกายหรือไม่

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

ฉันต้องหาวิธี (ใน Java) เพื่อเลื่อนดูระบบอย่างเป็นระบบเพื่อหาส่วนประกอบที่ฉันไม่รู้จัก 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));

หน้าต่างจะขยายใหญ่สุดก่อนที่จะมีการเรียกใช้โค้ดขนาดสั้นนี้

คำตอบที่ยอมรับไม่ได้ผลสำหรับฉัน สิ่งนี้ทำ:

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

โซลูชันสองข้อที่ฉันพบว่าใช้งานได้สำหรับฉัน:

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

และอื่น ๆ:

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