jQuery를 사용하여 사용자가 div의 맨 아래로 스크롤할 때 감지

jQuery를 사용하여 사용자가 div의 맨 아래로 스크롤할 때 감지

내용물이 다양한 div box(플럭스라고 함)가 있습니다.이 divbox는 오버플로를 auto로 설정했습니다.

여기서 제가 하려고 하는 것은, 이 DIV 박스의 하단으로 스크롤 할 때, 페이지에 더 많은 컨텐츠를 로드하는 방법은 알고 있습니다만(콘텐츠를 로드하는 방법), 사용자가 DIV 태그의 하단으로 스크롤 했을 때를 검출하는 방법은 모릅니다.페이지 전체에 걸쳐 이 작업을 수행하려면 .scrollTop을 .height에서 빼야 합니다.

하지만 여기선 안 될 것 같아요?

플럭스에서 .scrollTop을 꺼내서 inner라고 불리는 div 안에 모든 콘텐츠를 랩하려고 했는데 inner를 가져오면플럭스의 높이는 564px(div의 높이는 500으로 설정)를 반환하고, 'inner'의 높이는 1064를 반환하며, div의 하단에 564가 표시될 때 스크롤 탑을 반환합니다.

내가 뭘 할 수 있을까?

사용할 수 있는 속성/메서드가 몇 가지 있습니다.

$().scrollTop()//how much has been scrolled
$().innerHeight()// inner height of the element
DOMElement.scrollHeight//height of the content of the element

따라서 처음 두 속성의 합계를 구하면 마지막 속성과 같으면 끝에 도달한 것입니다.

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

http://jsfiddle.net/doktormolle/w7X9N/

편집: 다음과 같이 '바인드'를 '온'으로 업데이트했습니다.

jQuery 1.7에서는 .on() 메서드가 문서에 이벤트 핸들러를 첨부하는 데 선호됩니다.

창과 Div의 끝을 아래에서 스크롤하면 알림이 나오는 솔루션을 찾았습니다.

$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});

에서는 div 「 「 「 div 」 )를로 스크롤 ..posts이치노

이 질문은 5.5년 전에 제기되었지만 여전히 오늘날의 UI/UX 컨텍스트와 관련이 있습니다.그리고 나는 내 의견을 덧붙이고 싶다.

var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        // element is at the end of its scroll, load more content
    }

출처 : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Determine_if_an_element_has_been_totally_scrolled

일부 요소에서는 요소의 전체 높이를 스크롤할 수 없습니다.이 경우 다음을 사용할 수 있습니다.

var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
  // element is at the end of its scroll, load more content
}

스크롤하고 싶은 고정 디바의 솔루션을 찾을 때 찾은 추가 참고 사항입니다.내 시나리오에서는 정확히 끝을 칠 수 있도록 div의 패딩을 고려하는 것이 바람직하다는 것을 알았다.@Dr.로 확장합니다.Molle의 대답은 다음과 같습니다.

$('#flux').bind('scroll', function() {
    var scrollPosition = $(this).scrollTop() + $(this).outerHeight();
    var divTotalHeight = $(this)[0].scrollHeight 
                          + parseInt($(this).css('padding-top'), 10) 
                          + parseInt($(this).css('padding-bottom'), 10)
                          + parseInt($(this).css('border-top-width'), 10)
                          + parseInt($(this).css('border-bottom-width'), 10);

    if( scrollPosition == divTotalHeight )
    {
      alert('end reached');
    }
  });

패딩과 테두리를 포함한 정확한 위치를 알려드립니다.

근데 이게 나한테는 먹혔어

$(window).scroll(function() {
  if ($(window).scrollTop() >= (($(document).height() - $(window).height()) - $('#divID').innerHeight())) {
    console.log('div reached');
  }
});

간단한 DOM 사용에서는 상태를 확인할 수 있습니다.

element.scrollTop + element.clientHeight == element.scrollHeight

만약 사실이라면 당신은 종말에 도달한 것입니다.

숨김이나 스크롤로 오버플로가 있는 div에서 이 기능을 사용해야 하는 경우 다음과 같은 기능이 필요할 수 있습니다.

if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}

scrollHeight 프로펠러가 둥근 것 같기 때문에 ceil이 필요했습니다.혹은 다른 이유로 인해 이 값이 1 미만으로 떨어졌습니다.

Math.round() 함수를 사용하지 않을 경우 Dr.가 제안한 솔루션을 사용합니다.브라우저 창이 확대/축소되어 있으면 몰이 작동하지 않을 수 있습니다.

예를 들어 $(이것)입니다.scroll Top() + $ ( this ) 。innerHeight() = 600

$(this)[0].scrollHeight 산출량 = 599.99998

600 >= 599.99998에서 장애가 발생.

다음은 올바른 코드입니다.

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10)) {
            alert('end reached');
        }
    })
});

엄격한 조건이 필요하지 않은 경우 여백 픽셀을 추가할 수도 있습니다.

var margin = 4

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if(Math.round($(this).scrollTop() + $(this).innerHeight(), 10) >= Math.round($(this)[0].scrollHeight, 10) - margin) {
            alert('end reached');
        }
    })
});

거의 6년 전 UX 디자인에서 여전히 화제가 되고 있는 질문이지만, 여기에 만약 새로운 사람이 사용하고 싶은 데모 스니펫이 있습니다.

$(function() {

  /* this is only for demonstration purpose */
  var t = $('.posts').html(),
    c = 1,
    scroll_enabled = true;

  function load_ajax() {

    /* call ajax here... on success enable scroll  */
    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);

    /*again enable loading on scroll... */
    scroll_enabled = true;

  }


  $(window).bind('scroll', function() {
    if (scroll_enabled) {

      /* if 90% scrolled */
    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').outerHeight()-window.innerHeight)*0.9) {

        /* load ajax content */
        scroll_enabled = false;  
        load_ajax();
      }

    }

  });

});

h4 {
  color: red;
  font-size: 36px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="posts">
  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>

여기 다른 버전이 있습니다.

키 코드는 function scroller()로, overflow:scroll을 사용하여 스크롤 섹션을 포함하는 div의 높이로 입력을 받습니다.상부에서 5px, 하부에서 10px 정도 됩니다.그렇지 않으면 너무 예민해져요.최소 10px 정도 되는 것 같아요.10을 더하면 아래쪽 높이를 얻을 수 있습니다.5px로 충분할 것 같은데, 자세히 테스트해 보진 않았어요.YMMV. scrollHeight는 div의 표시된 높이(이 경우 400px)가 아니라 내부 스크롤 영역의 높이를 반환합니다.

<?php

$scrolling_area_height=400;
echo '
<script type="text/javascript">
          function scroller(ourheight) {
            var ourtop=document.getElementById(\'scrolling_area\').scrollTop;
            if (ourtop > (ourheight-\''.($scrolling_area_height+10).'\')) {
                alert(\'at the bottom; ourtop:\'+ourtop+\' ourheight:\'+ourheight);
            }
            if (ourtop <= (5)) {
                alert(\'Reached the top\');
            }
          }
</script>

<style type="text/css">
.scroller { 
            display:block;
            float:left;
            top:10px;
            left:10px;
            height:'.$scrolling_area_height.';
            border:1px solid red;
            width:200px;
            overflow:scroll; 
        }
</style>

$content="your content here";

<div id="scrolling_area" class="scroller">
onscroll="var ourheight=document.getElementById(\'scrolling_area\').scrollHeight;
        scroller(ourheight);"
        >'.$content.'
</div>';

?>

만약 누군가 얻는다면scrollHeight~하듯이undefined다음 요소의 첫 번째 하위 요소를 선택합니다.mob_top_menu[0].scrollHeight

도움이 될지는 모르겠지만 이렇게 하는 거예요.

창보다 큰 인덱스 패널이 있으며 이 인덱스가 끝날 때까지 스크롤합니다.그리고 나서 제자리에 고정합니다.페이지 맨 위로 스크롤하면 프로세스가 반대로 진행됩니다.

안부 전해요.

<style type="text/css">
    .fixed_Bot {    
            position: fixed;     
            bottom: 24px;    
        }     
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var sidebarheight = $('#index').height();
        var windowheight = $(window).height();


        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop();

            if (scrollTop >= sidebarheight - windowheight){
                $('#index').addClass('fixed_Bot');
            }
            else {
                $('#index').removeClass('fixed_Bot');
            }                   
        });
    });

</script>

여러분, 이것은 줌 문제에 대한 해결책입니다. 필요한 경우 모든 줌 수준에서 작동합니다.

if ( Math.abs(elem.offset().top) + elem.height() + elem.offset().top >= elem.outerHeight() ) {
                    console.log("bottom");
                    // We're at the bottom!
                }
            });
        }

$(window).on("scroll", function() {
    //get height of the (browser) window aka viewport
    var scrollHeight = $(document).height();
    // get height of the document 
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        // code to run when scroll to bottom of the page
    }
});

이게 기써브의 암호야

요소의 끝까지 스크롤할 때 탐지할 수 있는 이 코드를 만들었습니다!

let element = $('.element');

if ($(document).scrollTop() > element.offset().top + element.height()) {

     /// do something ///
}

어떤 대답도 통하지 않았다.이 대답은 통했다.

$(window).on('scroll', function() {
    if ($(window).scrollTop() >= $('#flux').offset().top + $('#flux').outerHeight() - window.innerHeight) {
        alert('You reached the end of the DIV');
    }
});

언급URL : https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery