> 웹 프론트엔드 > JS 튜토리얼 > jQuery는 스크롤을 바닥으로 감지합니다 - 읽기 t & c

jQuery는 스크롤을 바닥으로 감지합니다 - 읽기 t & c

William Shakespeare
풀어 주다: 2025-03-04 01:18:08
원래의
878명이 탐색했습니다.
jQuery 감지를 사용하여 하단으로 스크롤하고 사용자가 페이지 하단으로 스크롤 한 후 (또는 스크롤과 함께 DIV) 이용 약관 확인란을 활성화합니다.

다음 jQuery 코드 스 니펫은 사용자가 페이지 하단으로 스크롤했는지 여부를 감지 할 수 있습니다. jQuery Detect Scroll to Bottom - Read T&C 서비스 약관 내용은 여기 입니다 나는 위의 용어를 받아들입니다.

jQuery에 대한 FAQS 바닥에 스크롤 (FAQS)

jQuery를 사용하여 사용자가 페이지 하단으로 스크롤 할 때 감지하는 방법은 무엇입니까?

jQuery를 사용하여 사용자가 페이지 하단으로 스크롤 할 때
jQuery(document).ready(function() {
    jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);

    var $box = $("#scrollPane"),
        $inner = $("> .inner", $box),
        innerOuterHeight = $inner.outerHeight();
    boxHeight = $box.height();
    boxOffsetTop = $box.offset().top;

    jQuery("#scrollPane").scroll(function() {
        if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight) {
            jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
        }
    });
});
로그인 후 복사
로그인 후 복사
이벤트와 및

속성을 ​​조합 할 수 있습니다. 스크롤이 발생할 때마다 이벤트가 발사되고

속성은 요소 내용이 수직으로 스크롤되는 픽셀 수를 반환합니다.

속성은 패딩, 스크롤 막대 또는 여백을 포함한 패딩을 포함하여 픽셀로 요소의 총 높이를 반환합니다. 간단한 예는 다음과 같습니다.

이 코드에서 는 사용자가 상단에서 스크롤하는 픽셀 수를 반환하고 는 뷰포트의 높이를 반환하고

는 문서의 높이를 반환합니다. 스크롤 된 픽셀 수와 뷰포트 높이의 합이 문서의 높이와 같으면 사용자가 하단으로 스크롤했음을 의미합니다.

jQuery를 사용하여 페이지 하단으로 자동 스크롤하는 방법은 무엇입니까?

jQuery를 사용하여 페이지 하단으로 자동 스크롤하려면 메소드와

속성을 ​​조합하여 사용할 수 있습니다. scroll 메소드는 CSS 속성 세트의 사용자 정의 애니메이션을 수행합니다. scrollTop 속성은 요소 컨텐츠가 수직으로 스크롤하는 픽셀의 수를 반환하고, 속성은 요소의 높이를 반환합니다 (픽셀). 간단한 예는 다음과 같습니다. scrollHeight scroll 이 코드에서 scrollTop는 느린 애니메이션 속도로 문서를 하단으로 스크롤합니다. 속성은 문서의 높이로 설정되어있어 페이지가 바닥으로 스크롤됩니다. scrollHeight 사용자가 특정 요소의 맨 아래로 스크롤 할 때 jQuery를 사용하는 방법은 무엇입니까?

jQuery를 사용하여 사용자가 특정 요소의 맨 아래로 스크롤 할 때 이벤트를 ,
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert("bottom!");
    }
});
로그인 후 복사

속성으로 사용할 수 있습니다. $(window).scrollTop() 속성이 발생할 때마다 발생합니다. $(window).height() 속성은 수직으로 스크롤되는 픽셀의 수를 반환합니다. 간단한 예는 다음과 같습니다. $(document).height()

jQuery(document).ready(function() {
    jQuery("input#TERMS_ACCEPTED_YN").attr("disabled", true);

    var $box = $("#scrollPane"),
        $inner = $("> .inner", $box),
        innerOuterHeight = $inner.outerHeight();
    boxHeight = $box.height();
    boxOffsetTop = $box.offset().top;

    jQuery("#scrollPane").scroll(function() {
        if (Math.ceil(boxHeight - $inner.offset().top + boxOffsetTop) >= innerOuterHeight) {
            jQuery("input#TERMS_ACCEPTED_YN").removeAttr("disabled");
        }
    });
});
로그인 후 복사
로그인 후 복사
이 코드에서

는 사용자가 요소 상단에서 스크롤하는 픽셀의 수를 반환하고 $(this).scrollTop() 요소의 높이를 반환하고 $(this).outerHeight() 요소 내용의 높이를 반환합니다. 스크롤 된 픽셀 수와 요소 높이의 합이 컨텐츠 높이와 같으면 사용자가 요소 하단으로 스크롤했음을 의미합니다. this.scrollHeight

위 내용은 jQuery는 스크롤을 바닥으로 감지합니다 - 읽기 t & c의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿