Tôi cần phát hiện nếu người dùng được cuộn xuống cuối trang. Nếu chúng ở dưới cùng của trang, khi tôi thêm nội dung mới vào cuối, tôi sẽ tự động cuộn chúng xuống dưới cùng mới. Nếu họ không ở dưới cùng, họ đang đọc nội dung trước đó cao hơn trên trang, vì vậy tôi không muốn tự động cuộn chúng vì họ muốn giữ nguyên vị trí của họ.

Làm cách nào tôi có thể phát hiện nếu người dùng được cuộn xuống cuối trang hoặc nếu họ đã cuộn cao hơn trên trang?

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

Xem bản demo

Mã được cập nhật cho tất cả các hỗ trợ trình duyệt chính (bao gồm IE10 & IE11)

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

Vấn đề với câu trả lời được chấp nhận hiện tại window.scrollYlà không có sẵn trong IE.

Đây là một trích dẫn từ mdn liên quan đến scrollY:

Để tương thích với nhiều trình duyệt, hãy sử dụng window.pageY Offerset thay vì window.scrollY.

Và một đoạn làm việc:

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>

Lưu ý cho mac

Dựa trên nhận xét của @ Raphaël, có một vấn đề trong mac do một phần bù nhỏ.
Các điều kiện cập nhật sau đây hoạt động:

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

Tôi đã không có cơ hội để kiểm tra thêm, nếu ai đó có thể nhận xét về vấn đề cụ thể này thì sẽ rất tuyệt.

Câu trả lời được chấp nhận không làm việc cho tôi. Điều này đã làm:

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

Nếu bạn đang tìm cách hỗ trợ các trình duyệt cũ hơn (IE9), hãy sử dụng bí danh window.pageYOffsetcó hỗ trợ tốt hơn một chút.

Tôi đã tìm kiếm một câu trả lời nhưng không tìm thấy một câu trả lời chính xác. Đây là một giải pháp javascript thuần túy hoạt động với Firefox, IE và Chrome mới nhất tại thời điểm trả lời này:

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

Những công việc này

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

Nếu bạn đang tìm cách hỗ trợ các trình duyệt cũ hơn (IE9), hãy thay thế window.scrollY bằng window.pageY Offerset

Tôi mới bắt đầu xem xét điều này và câu trả lời ở đây đã giúp tôi, vì vậy cảm ơn vì điều đó. Tôi đã mở rộng một chút để mã an toàn trở lại IE7:

Hy vọng điều này chứng tỏ hữu ích cho một ai đó.

Ở đây, có một Fiddle;)

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

Nếu bạn đang đặt height: 100%trên một số vùng chứa <div id="wrapper">, thì đoạn mã sau sẽ hoạt động (được thử nghiệm trong 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");
    }
};

Trả lời này sẽ khắc phục trường hợp cạnh, điều này là bởi vì pageYOffsetlà doubletrong khi innerHeightvà offsetHeightlà long, vì vậy khi trình duyệt cung cấp cho bạn các thông tin, bạn có thể là một ngắn pixel. Ví dụ: ở dưới cùng của trang chúng tôi có

thật window.innerHeight = 10.2

thật window.pageYOffset = 5.4

thật document.body.offsetHeight = 15.6

Tính toán của chúng tôi sau đó trở thành: 10 + 5.4> = 16 là sai

Để khắc phục điều này chúng ta có thể làm Math.ceiltrên pageYOffsetgiá trị.

Mong rằng sẽ giúp.

nếu bạn thích jquery

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

Bạn có thể nhìn vào cuộn vô hạn của jquery:

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

Nghe có vẻ giống như những gì bạn yêu cầu, giả sử bạn sẵn sàng sử dụng thư viện jquery và không hy vọng vào một phương thức JS thuần túy nghiêm ngặt.

Đáng ngạc nhiên là không có giải pháp nào làm việc cho tôi. Tôi nghĩ rằng đó là vì tôi cssđã bị rối và bodykhông bao quát tất cả nội dung khi sử dụng height: 100%(chưa biết tại sao). Tuy nhiên, trong khi tìm kiếm một giải pháp tôi đã đưa ra một cái gì đó tốt ... về cơ bản là giống nhau, nhưng có lẽ nó đáng để xem xét - Tôi mới tham gia lập trình nên rất tiếc nếu nó làm chậm như vậy, ít được hỗ trợ hoặc đại loại như cái đó...

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

Mã này đã làm việc cho tôi trong Firefox và IE.

Sử dụng defaultViewvà documentElementvới đoạn mã chức năng được nhúng:

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>

Bạn có thể kiểm tra xem kết quả tổng hợp của chiều cao và đỉnh cuộn của cửa sổ có lớn hơn so với thân máy không

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

Tôi đã phải nghĩ ra một cách (bằng Java) để cuộn xuống một cách có hệ thống để tìm kiếm một thành phần mà tôi không biết XPath chính xác (câu chuyện dài, vì vậy chỉ cần chơi theo). Như tôi vừa nêu, tôi cần phải cuộn xuống trong khi tìm kiếm một thành phần và dừng lại khi tìm thấy thành phần đó hoặc cuối trang.

Đoạn mã sau kiểm soát việc cuộn xuống cuối trang:

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

Nhân tiện, cửa sổ được tối đa hóa trước khi đoạn mã này được thực thi.

Câu trả lời được chấp nhận không làm việc cho tôi. Điều này đã làm:

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