사용자가 맨 아래로 스크롤 할 때 콘텐츠가로드되는 페이지 매김 시스템 (Facebook과 같은 정렬 시스템)을 만들고 있습니다. 가장 좋은 방법은 사용자가 페이지 하단에있을 때를 찾고 더 많은 게시물을로드하기 위해 ajax 쿼리를 실행하는 것입니다.
유일한 문제는 사용자가 jQuery를 사용하여 페이지 하단으로 스크롤했는지 확인하는 방법을 모른다는 것입니다. 어떤 아이디어?
사용자가 jQuery를 사용하여 페이지 하단으로 스크롤했을 때 확인하는 방법을 찾아야합니다.
답변
다음 과 같은 .scroll()이벤트를 사용하십시오 window.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});여기 에서 테스트 할 수 있습니다 . 창의 맨 위 스크롤이 걸리므로 스크롤되는 양이 얼마인지, 보이는 창의 높이를 추가하고 전체 내용의 높이 ( document) 와 같은지 확인합니다 . 사용자가 바닥 근처에 있는지 확인하려면 다음과 같이 보일 것입니다.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
}
});여기 에서 해당 버전을 테스트 할 수 있습니다100 . 하단에서 트리거하려는 픽셀로 조정 하십시오 .
답변
Nick Craver의 답변은 잘 작동 $(document).height()하며 브라우저 의 가치가 다른 문제를 아끼지 않습니다.
모든 브라우저에서 작동하게하려면 James Padolsey 의이 기능을 사용하십시오 .
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}대신 $(document).height()최종 코드는 다음과 같습니다.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});답변
왜 이것이 아직 게시되지 않았는지 잘 모르겠지만 MDN의 문서 에 따르면 가장 간단한 방법은 기본 자바 스크립트 속성을 사용하는 것입니다.
element.scrollHeight - element.scrollTop === element.clientHeight스크롤 가능한 요소의 맨 아래에 있으면 true를 반환합니다. 따라서 단순히 자바 스크립트를 사용하십시오.
element.addEventListener('scroll', function(event)
{
var element = event.target;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
{
console.log('scrolled');
}
});scrollHeight동안 즉, 8, 더 정확히 말하면에서, 브라우저에서 폭 넓은 지원을 clientHeight하고 scrollTop양쪽 모두를 지원합니다. 심지어 6입니다. 이것은 브라우저 간 안전해야합니다.
답변
Nick의 솔루션을 사용하고 반복적 인 경고 / 이벤트가 발생하는 경우 경고 예제 위에 코드 줄을 추가 할 수 있습니다.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$(window).unbind('scroll');
alert("near bottom!");
}
});즉, 코드는 문서 하단의 100px 내에 처음있을 때만 실행됩니다. 위로 스크롤 한 다음 아래로 스크롤하면 반복되지 않습니다. Nick의 코드를 사용하는 대상에 따라 유용 할 수도 있고 그렇지 않을 수도 있습니다.
답변
Nick Craver의 탁월한 대답 외에도 스크롤 이벤트를 조절하여 너무 자주 발생하지 않도록 브라우저 성능을 향상시킬 수 있습니다 .
var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);
$document.ready(function () {
$window
.off('scroll', ScrollHandler)
.on('scroll', ScrollHandler);
});
function ScrollHandler(e) {
//throttle event:
clearTimeout(_throttleTimer);
_throttleTimer = setTimeout(function () {
console.log('scroll');
//do work
if ($window.scrollTop() + $window.height() > $document.height() - 100) {
alert("near bottom!");
}
}, _throttleDelay);
}답변
Nick Craver의 답변은 iOS 6 Safari Mobile에서 작동하도록 약간 수정해야하며 다음과 같아야합니다.
$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()) {
alert("bottom!");
}
});변경 $ (창) .height의을 () 에 window.innerHeight는 주소 표시 줄이 숨겨져있는 경우 추가로 60 픽셀이 윈도우의 높이에 추가 만 사용하고 있기 때문에 수행해야 $(window).height()않습니다 하지 이러한 변화를 반영 사용하는 동안, window.innerHeight않습니다.
참고 : window.innerHeight가로 스크롤 막대의 높이를 $(window).height()포함하지 않는 것과 달리 속성에 가로 스크롤 막대의 높이 (렌더 된 경우)도 포함됩니다. 이는 Mobile Safari에서 문제가되지 않지만 다른 브라우저 또는 이후 버전의 Mobile Safari에서 예기치 않은 동작을 일으킬 수 있습니다. 변경 ==하는 것은 >=가장 일반적인 사용의 경우에이 문제를 해결할 수 있습니다.
이 window.innerHeight숙박 시설 에 대한 자세한 내용은 여기를 참조하십시오
답변
상당히 간단한 접근법이 있습니다.
const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight
예
elm.onscroll = function() {
if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
// User has scrolled to the bottom of the element
}
}elmie에서 검색된 요소는 어디에 있습니까 document.getElementById?
