[javascript] 자바 스크립트 : 브라우저 창이 아래로 스크롤되는지 감지하는 방법?

Program / 글쓴이

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

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

답변

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을 사용하십시오.

작업 스 니펫 :

코드 스 니펫 표시

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