사용자가 페이지 하단으로 스크롤되는지 감지해야합니다. 페이지 하단에 새 콘텐츠를 추가하면 자동으로 새 하단으로 스크롤됩니다. 그들이 맨 아래에 있지 않으면 페이지에서 이전 내용을 더 많이 읽으므로 원래 위치에 머무르고 싶기 때문에 자동 스크롤하고 싶지 않습니다.

사용자가 페이지의 맨 아래로 스크롤되는지 또는 페이지에서 더 높게 스크롤되었는지 어떻게 알 수 있습니까?

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에서 사용할 수 없다는 것입니다.

scrollY에 관한 mdn 의 인용문은 다음 과 같습니다.

브라우저 간 호환성을 위해 window.scrollY 대신 window.pageYOffset을 사용하십시오.

작업 스 니펫 :

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

올바른 XPath를 모르는 구성 요소를 찾기 위해 체계적으로 아래로 스크롤하는 방법 (Java)을 생각해 내야했습니다 (긴 이야기이므로 그냥 따라 가십시오). 방금 언급했듯이 구성 요소를 찾는 동안 아래로 스크롤하여 구성 요소를 찾거나 페이지 아래쪽에 도달하면 중지해야했습니다.

다음 코드 스 니펫은 페이지 맨 아래로 스크롤을 제어합니다.

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