javascript: detect scroll end

javascript: detect scroll end

저는.div겹겹이 쌓다overflow로 설정.scroll.

바닥까지 스크롤 시div, 함수를 실행하고 싶습니다.

수용된 답변은 근본적으로 결함이 있었고, 이후 삭제되었습니다.정답은 다음과 같습니다.

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}

Firefox, Chrome 및 Opera에서 테스트했습니다.그건 효과가 있다.

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight)
{
//your code here
}

저도 검색해봤는데, 여기 댓글을 다 확인하고 나서도 이게 바닥인지 아닌지 확인할 수 있는 솔루션입니다.

위의 두 가지 답변을 모두 받을 수 없었기 때문에 여기에 저에게 맞는 세 번째 옵션이 있습니다! (이것은 jQuery와 함께 사용됩니다.)

if (($(window).innerHeight() + $(window).scrollTop()) >= $("body").height()) {
    //do stuff
}

누구에게나 도움이 되길 바랍니다!

좋아요, 여기에 좋은 적절한 해결책이 있습니다.

당신은 디브와 전화를 했습니다.id="myDiv"

기능이 작동합니다.

function GetScrollerEndPoint()
{
   var scrollHeight = $("#myDiv").prop('scrollHeight');
   var divHeight = $("#myDiv").height();
   var scrollerEndPoint = scrollHeight - divHeight;

   var divScrollerTop =  $("#myDiv").scrollTop();
   if(divScrollerTop === scrollerEndPoint)
   {
       //Your Code 
       //The Div scroller has reached the bottom
   }
}

효과가 있었습니다.

$(window).scroll(function() {
  buffer = 40 // # of pixels from bottom of scroll to fire your function. Can be 0
  if ($(".myDiv").prop('scrollHeight') - $(".myDiv").scrollTop() <= $(".myDiv").height() + buffer )   {
    doThing();
  }
});

jQuery 1.6 이상을 사용해야 함

효과가 있는 대안을 찾았습니다.

이러한 답변 중 어떤 것도 제게 도움이 되지 않았고(현재 FireFox 22.0에서 테스트 중임), 많은 연구 끝에 훨씬 더 깨끗하고 간단한 해결책을 찾았습니다.

구현 솔루션:

function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

자료: http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

안부 전해요

저는 Bjorn Tipling의 답변을 바탕으로 이벤트 기반 솔루션을 만들었습니다.

(function(doc){
    'use strict';

    window.onscroll = function (event) {
        if (isEndOfElement(doc.body)){
            sendNewEvent('end-of-page-reached');
        }
    };

    function isEndOfElement(element){
        //visible height + pixel scrolled = total height 
        return element.offsetHeight + element.scrollTop >= element.scrollHeight;
    }

    function sendNewEvent(eventName){
        var event = doc.createEvent('Event');
        event.initEvent(eventName, true, true);
        doc.dispatchEvent(event);
    }
}(document));

그리고 이벤트를 이렇게 사용합니다.

document.addEventListener('end-of-page-reached', function(){
    console.log('you reached the end of the page');
});

BTW: 자바스크립트용으로 이 CSS를 추가해야 페이지 길이를 알 수 있습니다.

html, body {
    height: 100%;
}

데모: http://plnkr.co/edit/CCokKfB16iWIMddtWjPC?p=preview

실험이 있습니다.onscrollend이벤트 https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event

지금은 firefox 109+에서만 작동하며, 다른 브라우저들이 따라잡는다면 매우 좋을 것입니다.

이에 대한 폴리필 사용 https://github.com/argyleink/scrollyfills 다음과 같이 사용합니다.

import "scrollyfills";
...
    scrollContainer.addEventListener(
      "scrollend",
      (ev) => { console.log('scroll END') }
    );

이것이 실제로 정답이 될 것입니다.

function scrolled(event) {
   const container = event.target.body
   const {clientHeight, scrollHeight, scrollY: scrollTop} = container

   if (clientHeight + scrollY >= scrollHeight) {
    scrolledToBottom(event);
   }
}

사용하는 이유는.event최신 데이터입니다. 디브에 대한 직접적인 참조를 사용한다면 당신은 구식이 될 것입니다.scrollY위치를 정확하게 감지하지 못합니다.

추가적인 방법은 그것을 a로 포장하는 것입니다.setTimeout데이터가 업데이트될 때까지 기다립니다.

MDN Element.scroll Height 예를 살펴봅니다.

이 예를 확인해 보는 것이 좋습니다: stackoverflow.com/a/24815216 ...스크롤 동작에 대한 교차 browser 핸들링을 구현합니다.

다음 토막글을 사용할 수 있습니다.

//attaches the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        scrollTop = target.scrollTop || window.pageYOffset,
        scrollHeight = target.scrollHeight || document.body.scrollHeight;
    if (scrollHeight - scrollTop === $(target).innerHeight()) {
      console.log("► End of scroll");
    }
});

부터.innerHeight일부 된 IE다.clientHeight사용 가능:

$(window).scroll(function (e){
    var body = document.body;    
    //alert (body.clientHeight);
    var scrollTop = this.pageYOffset || body.scrollTop;
    if (body.scrollHeight - scrollTop === parseFloat(body.clientHeight)) {
        loadMoreNews();
    }
});

React/JSX에서도 동일한 작업을 수행하려면 다음과 같은 스니펫이 있습니다.

export const scrolledToEnd = event => {
  const container = event.target;

  if (container.offsetHeight + container.scrollTop >= container.scrollHeight) {
    return true;
  }
  return false;
};

구성 요소에 추가

<Component onScroll={scrolledToEnd}>

스크롤의 끝을 얻기 위해 이 방법을 찾았습니다.

let TheBody = document.getElementsByTagName("body"); // I choose the "body" element for my exemple
function OnScrolling(){                             // put this on a scrolling EVENT
let ScrollEnd = TheBody[0].scrollHeight - window.innerHeight; // this is the scroll end Pixel

    if (ScrollEnd.toFixed() == window.scrollY.toFixed()){
        //do stuff 
    }
}

이제 당신의 DIV나 스크롤링이 있는 다른 요소에 대해서는 자바스크립트에서 이 방법을 찾았습니다.

let D = document.getElementById("D1"); // I gave "D1" as id to my div

    // this one is to calculate the scroll end Pixels
let Calc = D.scrollHeight - D.clientHeight;

function ScrollingInD1() {

    //this one is to calculate the scrolling percent while going through the <div> it can help for "Responsivity"
let percent = (D.scrollTop * 100) / Calc;

    if (D.scrollTop == Calc) {
        // do Stuffs
    }
}

이것은 NextJS를 사용하는 저에게 효과가 있었습니다.도움이 되길 바랍니다.

• 스크롤에서 1px 빼기 높이

function onScroll(e: any) {
    const scroll = e.target.offsetHeight + e.target.scrollTop
    const height = e.target.scrollHeight - 1

    if (scroll >= height){
        console.log("END REACHED")
    }
}

return (
    <div onScroll={onScroll}></div>
)

언급URL : https://stackoverflow.com/questions/3962558/javascript-detect-scroll-end