jQuery로 DIV의 하단에 사용자가 스크롤 할 때 검출

해결법

1.당신이 사용할 수있는 몇 가지 특성 / 방법이 있습니다 :

당신이 사용할 수있는 몇 가지 특성 / 방법이 있습니다 :
```
$().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/

편집 : 나는 당 '에'에 '바인딩'을 업데이트했습니다 :
2.나는 당신이 바닥에서 표시 사업부의 창문과 끝을 스크롤 할 때 당신에게 경고를 제공하는 솔루션을 발견했다.

나는 당신이 바닥에서 표시 사업부의 창문과 끝을 스크롤 할 때 당신에게 경고를 제공하는 솔루션을 발견했다.
```
$(window).bind('scroll', function() {
    if($(window).scrollTop() >= $('.posts').offset().top + $('.posts').outerHeight() - window.innerHeight) {
        alert('end reached');
    }
});
```
DIV (.posts)는 자사의주고 당신에게 경고를 완료 할 때이 예에서 아래로 스크롤합니다.
3.질문은 5.5 년 전에 질문을 받았다지만, 여전히 이상 관련 오늘날의 UI / UX의 맥락에서이다. 그리고 난 내 두 센트를 추가하고 싶습니다.

질문은 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
}
```
4.내가 스크롤에 원하는 고정 사업부에 대한 해결책을 찾을 때 나는 여기로 그냥 추가 참고이를 발견했다. 내 시나리오 내가 정확히 끝을 칠 수 있도록 그 바람직가 사업부에 계정에 패딩을하는 것을 발견했다. Dr.Molle의 대답 @에 확장 그래서 나는 다음을 추가

내가 스크롤에 원하는 고정 사업부에 대한 해결책을 찾을 때 나는 여기로 그냥 추가 참고이를 발견했다. 내 시나리오 내가 정확히 끝을 칠 수 있도록 그 바람직가 사업부에 계정에 패딩을하는 것을 발견했다. 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');
    }
  });
```
즉 패딩과 국경을 포함하여, 당신에게 정확한 위치를 줄 것이다

5.하지만 이것은 나를 위해 일한

하지만 이것은 나를 위해 일한

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

6.당신은 숨기거나 스크롤로 오버 플로우-Y를 가지고 사업부에서이를 사용해야하는 경우,이 같은 당신이 필요 할 수있다.

당신은 숨기거나 스크롤로 오버 플로우-Y를 가지고 사업부에서이를 사용해야하는 경우,이 같은 당신이 필요 할 수있다.
```
if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
    at_bottom = true;
}
```
나는 천장을 만들다가 소품 scrollHeight 라운드 것 같다, 또는 때문에 필요했던 발견 아마도이 1 미만으로 해제 될 원인이 다른 이유.
7.당신이 Math.round을 사용하지 않는 경우 () Dr.Molle에 의해 제안 된 솔루션을 작동합니다 브라우저 창은 줌을 가지고 어떤 경우에는하지 작동합니다.

당신이 Math.round을 사용하지 않는 경우 () Dr.Molle에 의해 제안 된 솔루션을 작동합니다 브라우저 창은 줌을 가지고 어떤 경우에는하지 작동합니다.

예를 들면 $ (이) .scrollTop () + $ (이) .innerHeight () = 600

$ (이) [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');
        }
    })
});
```
8.간단한 DOM 사용에서는 상태를 확인하실 수 있습니다

간단한 DOM 사용에서는 상태를 확인하실 수 있습니다
```
element.scrollTop + element.clientHeight == element.scrollHeight
```
true의 경우 당신은 끝났습니다.
9.사람이 정의되지 않은으로 scrollHeight를 얻을 경우, 요소의 첫 번째 하위 요소를 선택 mob_top_menu [0] .scrollHeight을

사람이 정의되지 않은으로 scrollHeight를 얻을 경우, 요소의 첫 번째 하위 요소를 선택 mob_top_menu [0] .scrollHeight을

10.그것은 어떤 도움이 아니라 확실 경우이 내가 그것을 할 방법이다.

그것은 어떤 도움이 아니라 확실 경우이 내가 그것을 할 방법이다.

나는 창문이 큰 인덱스 패널이 있고 나는이 인덱스에 도달 할 때 끝까지 스크롤 할 수 있습니다. 그럼 제 위치에 고정합니다. 페이지 상단으로 이동하면이 과정은 반전됩니다.

문안 인사.

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

11.이 거의 육년, UX 디자인 전에 여전히 화제를 요청했다지만, 여기에 어떤 초보자가 사용하기를 원한다면 데모 조각이다

이 거의 육년, UX 디자인 전에 여전히 화제를 요청했다지만, 여기에 어떤 초보자가 사용하기를 원한다면 데모 조각이다

() {(기능 $ / * 이것은 단지 데모 목적입니다 * / VAR t = $ ( '. 포스트'). html로 () C = 1, scroll_enabled 사실 =; load_ajax 함수 () { 여기에 / * 호출 아약스 ... 성공을 가능하게 스크롤 * / $ ( '포스트.') APPEND ( '
'+ (C ++) + ''+ t).; / * 다시 스크롤에로드 할 수 있도록 ... * / scroll_enabled 사실 =; } $ (창) .bind ( '스크롤'기능 () { 경우 (scroll_enabled) { / * 90 % 스크롤 경우 * / 경우 ($ (창) .scrollTop ()> = ($ () 오프셋 (offset) 상단 + $ ( '게시물.') outerHeight () '게시물.'-... window.innerHeight) * 0.9) { / * 부하 아약스 내용 * / scroll_enabled = 거짓; load_ajax (); } } }); }); H4 { 색상 : 빨강; 폰트 크기 : 36 x 36 픽셀; 배경 색 : 노란색; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
로렘 입숨 슬픔 앉아 AMET Consectetuer augue nibh lacus에서로
Pretium Donec 고양이 속 슬픔 penatibus로
Phasellus consequat Vivamus 음주 운전 된 Lacinia로
Ornare nonummy laoreet lacus Donec로
유타 유타 리베로 Curabitur ID로
음주 운전 pretium hendrerit 사피엔스 Pellentesque로
로렘 입숨 슬픔 앉아 AMET로
Consectetuer augue nibh lacus에서로
Pretium Donec 고양이 속 슬픔 penatibus로
Phasellus consequat Vivamus 음주 운전 된 Lacinia로
Ornare nonummy laoreet lacus Donec로
유타 유타 리베로 Curabitur ID 로
음주 운전 pretium hendrerit 사피엔스 Pellentesque로
로렘 입숨 슬픔 앉아 AMET로
Consectetuer augue nibh lacus에서로
Pretium Donec 고양이 속 슬픔 penatibus로
Phasellus consequat Vivamus 음주 운전 된 Lacinia로
Ornare nonummy laoreet lacus Donec
UT UT 리베로 Curabitur ID로
음주 운전 pretium hendrerit 사피엔스 Pellentesque로
로렘 입숨 슬픔 앉아 AMET로
Consectetuer augue nibh lacus에서로
Pretium Donec 고양이 속 슬픔 penatibus로
Phasellus consequat Vivamus 음주 운전 된 Lacinia로
Ornare nonummy laoreet lacus Donec로
유타 유타 리베로 Curabitur ID로
음주 운전 pretium hendrerit 사피엔스 Pellentesque

12.여기에 또 다른 버전입니다.

여기에 또 다른 버전입니다.

스크롤 : 키 코드는 오버플로를 사용하여, 스크롤 부를 포함 된 div의 높이로 입력을 받아 함수 스크롤 ()이다. 그것은 상단 또는 하단에 같은 바닥에서 상단 또는 10px에서 5px 가깝다. 그렇지 않으면 너무 민감합니다. 최소에 관한 것입니다 10px 보인다. 당신은 바닥 높이를 얻기 위해 DIV의 높이 (10)를 추가 확인할 수 있습니다. 내가 5px 힘 작업을 가정, 나는 광범위하게 테스트하지 않았다. YMMV. scrollHeight는 내주 스크롤 영역이 경우 400 픽셀 인 DIV, 아니 표시된 높이의 높이를 반환한다.

<?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>';

?>

13.얘들이는 경우에, 모든 줌 레벨에서 작동, 줌 문제의 해결책이 당신이 그것을 필요 :

얘들이는 경우에, 모든 줌 레벨에서 작동, 줌 문제의 해결책이 당신이 그것을 필요 :

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

14.

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

이 GitHub의에 코드입니다.

from https://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] === 변수 정의 변수 대 대해서 typeof === "미등록" (0)	2020.10.05
[JQUERY] jQuery를 모든 활성 아약스 요청을 중지 (0)	2020.10.05
[JQUERY] ASP.NET 버튼 게시 jQuery를 UI와 대화 (0)	2020.10.05
[JQUERY] 어떻게 텍스트 상자의 내용을 감지하는 방법 변경 (0)	2020.10.05
[JQUERY] (즉시)을 사용하여 JQuery와 <input 타입 = "텍스트">에서의 모든 변경을 감지 (0)	2020.10.05

복붙노트

[JQUERY] jQuery로 DIV의 하단에 사용자가 스크롤 할 때 검출

jQuery로 DIV의 하단에 사용자가 스크롤 할 때 검출

해결법

1.당신이 사용할 수있는 몇 가지 특성 / 방법이 있습니다 :

2.나는 당신이 바닥에서 표시 사업부의 창문과 끝을 스크롤 할 때 당신에게 경고를 제공하는 솔루션을 발견했다.

3.질문은 5.5 년 전에 질문을 받았다지만, 여전히 이상 관련 오늘날의 UI / UX의 맥락에서이다. 그리고 난 내 두 센트를 추가하고 싶습니다.

5.하지만 이것은 나를 위해 일한

6.당신은 숨기거나 스크롤로 오버 플로우-Y를 가지고 사업부에서이를 사용해야하는 경우,이 같은 당신이 필요 할 수있다.

7.당신이 Math.round을 사용하지 않는 경우 () Dr.Molle에 의해 제안 된 솔루션을 작동합니다 브라우저 창은 줌을 가지고 어떤 경우에는하지 작동합니다.

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

9.사람이 정의되지 않은으로 scrollHeight를 얻을 경우, 요소의 첫 번째 하위 요소를 선택 mob_top_menu [0] .scrollHeight을

10.그것은 어떤 도움이 아니라 확실 경우이 내가 그것을 할 방법이다.

11.이 거의 육년, UX 디자인 전에 여전히 화제를 요청했다지만, 여기에 어떤 초보자가 사용하기를 원한다면 데모 조각이다

12.여기에 또 다른 버전입니다.

13.얘들이는 경우에, 모든 줌 레벨에서 작동, 줌 문제의 해결책이 당신이 그것을 필요 :

14.

'JQUERY' 카테고리의 다른 글

티스토리툴바