사용자가 jQuery를 사용하여 특정 요소로 스크롤할 때 이벤트를 트리거하는 방법은 무엇입니까?

jQuery를 사용하여 사용자가 특정 요소로 스크롤할 때 이벤트 트리거

웹 개발에서는 사용자가 특정 요소로 스크롤할 때 이벤트를 트리거해야 하는 경우가 많습니다. 페이지의 특정 요소로 스크롤합니다. 이는 콘텐츠 표시 또는 업데이트, 애니메이션 실행 또는 알림 표시에 유용할 수 있습니다.

jQuery를 사용하여 이를 달성하려면 창 개체의 스크롤 이벤트를 활용할 수 있습니다. 그러나 단순히 $('#scroll-to').scroll()을 사용하는 것만으로는 충분하지 않습니다. 스크롤 이벤트는 현재 페이지에 표시되는 요소에 대해서만 실행되기 때문입니다.

대신 jQuery의 offset() 함수는 창을 기준으로 요소의 위치를 ​​결정하고, innerHeight() 함수는 높이를 결정합니다. 이 값을 창 높이 및 scrollTop 값과 비교하여 해당 요소가 현재 사용자 보기에 있는지 확인할 수 있습니다.

예를 들어 다음 코드는 #scroll-to h1 요소의 오프셋과 높이를 계산합니다. 그런 다음 이를 창의 스크롤 위치와 비교합니다.

$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
  if (wS > (hT + hH - wH)) {
    console.log('H1 is in the viewport!');
  }
});

이 접근 방식을 사용하면 페이지에서의 위치에 관계없이 h1 요소가 사용자 보기로 스크롤될 때마다 이벤트를 트리거할 수 있습니다. 지정된 요소가 표시되면 원하는 작업을 수행하도록 이 코드를 조정할 수 있습니다.

위 내용은 사용자가 jQuery를 사용하여 특정 요소로 스크롤할 때 이벤트를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!