jQuery 애니메이션 중에 창 스크롤을 일시적으로 비활성화하는 방법은 무엇입니까?

일시적으로 창 스크롤 비활성화

scrollTo jQuery 플러그인을 사용할 때 원활한 사용자 경험을 위해서는 애니메이션 도중 원치 않는 스크롤을 방지하는 것이 필수적입니다. 한 가지 옵션은 본문 오버플로를 전환하는 것이지만, 보다 세련된 접근 방식은 가시성을 유지하면서 스크롤 막대를 비활성화하는 것입니다.

해결책: 스크롤 상호 작용 취소

스크롤 이벤트 자체는 취소할 수 없습니다. 대신 다음을 포함하여 스크롤을 유발하는 특정 상호 작용을 방지하는 것이 좋습니다.

• 마우스 및 터치 스크롤(모바일 장치용)
• 스크롤과 관련된 키보드 버튼(예: 화살표 키, 페이지 위로/ 아래, 집, 끝)

구현

다음 JavaScript 코드

// Prevent scroll events
function disableScroll() {
  // Add event listeners for various scroll interactions
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Older Firefox
  window.addEventListener('wheel', preventDefault, { passive: false }); // Modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Re-enable scroll events
function enableScroll() {
  // Remove event listeners for scroll interactions
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false });
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Function to prevent event default action
function preventDefault(e) {
  e.preventDefault();
}

// Function to prevent default for specific keyboard scroll keys
function preventDefaultForScrollKeys(e) {
  const scrollKeys = [37, 38, 39, 40]; // Arrow keys
  if (scrollKeys.includes(e.keyCode)) {
    e.preventDefault();
  }
}

스크롤을 비활성화하려면 비활성화Scroll()을 호출합니다. 다시 활성화하려면 활성화Scroll()을 호출하세요.

위 내용은 jQuery 애니메이션 중에 창 스크롤을 일시적으로 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!