내부에 다양한 양의 내용이있는 div 상자 (플럭스라고 함)가 있습니다. 이 divbox의 오버플로가 자동으로 설정되어 있습니다.
이제 내가하려는 것은이 DIV 상자의 맨 아래로 스크롤을 사용하여 더 많은 내용을 페이지에로드 할 때이 방법을 알고 있지만 내용을로드하는 방법을 모른다는 것입니다. 사용자가 div 태그의 맨 아래로 스크롤 한 시간을 감지합니까? 전체 페이지에 대해하고 싶다면 .scrollTop을 가져 와서 .height에서 빼십시오.
하지만 여기서는 그렇게 할 수 없습니까?
플럭스에서 .scrollTop을 가져 와서 inner라는 div에 모든 내용을 래핑하려고했지만 innerHeight of flux를 가져 가면 564px (div는 높이로 500으로 설정 됨)와 ‘innner’높이를 반환합니다. div의 맨 아래에 564가 표시되면 1064와 스크롤 탑을 반환합니다.
어떡해?
답변
사용할 수있는 몇 가지 속성 / 방법이 있습니다.
$().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 ( .posts)가 끝나면 스크롤을 내리면 경고가 표시됩니다.
답변
이 질문은 5.5 년 전에 제기되었지만 오늘날의 UI / UX 컨텍스트와 관련이 있습니다. 그리고 2 센트를 추가하고 싶습니다.
var element = document.getElementById('flux');
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
// element is at the end of its scroll, load more content
}일부 요소에서는 요소의 전체 높이를 스크롤 할 수 없습니다. 이 경우 다음을 사용할 수 있습니다.
var element = docuement.getElementById('flux');
if (element.offsetHeight + element.scrollTop === element.scrollHeight) {
// element is at the end of its scroll, load more content
}답변
스크롤하려는 고정 된 div에 대한 솔루션을 찾을 때 이것을 발견했을 때 추가 참고 사항입니다. 내 시나리오에서 나는 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');
}
});답변
overflow-y가 숨겨진 또는 스크롤로 표시된 div에서 이것을 사용해야하는 경우 이와 같은 것이 필요할 수 있습니다.
if ($('#element').prop('scrollHeight') - $('#element').scrollTop() <= Math.ceil($('#element').height())) {
at_bottom = true;
}prop scrollHeight가 둥글거나 아마도 1 미만으로 꺼져있는 다른 이유 때문에 ceil이 필요하다는 것을 알았습니다.
답변
Math.round () 함수를 사용하지 않는 경우 솔루션 하지 않으면 브라우저 창에 확대 / 축소가있는 경우 Dr.Molle에서 제안한 이 작동하지 않을 수 있습니다.
예를 들어 $ (this) .scrollTop () + $ (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');
}
})
});