jQuery를 사용하여 뷰포트에 DIV가 표시되는 시기를 감지하는 방법은 무엇입니까?

jQuery를 사용하여 DIV의 가시성 변경에 응답

jQuery는 창 가시성 이벤트를 포함하여 DOM 이벤트를 처리하기 위한 강력한 프레임워크를 제공합니다. 이 기사에서는 특정 DIV 요소가 뷰포트 내에 표시될 때 특정 작업을 트리거하는 방법을 살펴보겠습니다.

사용자 정의 "표시 가능한" 이벤트 핸들러 만들기

jQuery는 기본적으로 "isvisible" 이벤트 핸들러를 제공하지 않지만 이벤트 리스너를 사용하여 사용자 정의 솔루션을 구현할 수 있습니다. 방법은 다음과 같습니다.

$(function() {

  // Register a "isVisible" listener for the #contentDiv
  $('#contentDiv').on('isVisible', function() {
    alert("Div is now visible");
  });

  // Check for visibility changes and trigger the event
  $(window).scroll(function() {
    var topOfDiv = $('#contentDiv').offset().top;
    var bottomOfDiv = topOfDiv + $('#contentDiv').height();
    var topOfWindow = $(window).scrollTop();
    var bottomOfWindow = topOfWindow + $(window).height();

    if (topOfDiv >= topOfWindow && bottomOfDiv <= bottomOfWindow) {
      $('#contentDiv').trigger('isVisible');
    }
  });
});

.show() 메서드 확장

또는 기존 ".show()" 메서드를 확장하여 사용자 정의를 실행할 수도 있습니다. 요소가 표시되면 'afterShow' 이벤트가 발생합니다. 이 접근 방식에 대한 코드 조각은 다음과 같습니다.

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj = $(this),
        newCallback = function() {
          if ($.isFunction(oldCallback)) {
            oldCallback.apply(obj);
          }
          obj.trigger('afterShow');
        };

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Use old show function with custom callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

위 내용은 jQuery를 사용하여 뷰포트에 DIV가 표시되는 시기를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!