스크롤바 가시성을 유지하면서 JavaScript에서 스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?

JavaScript에서 임시 스크롤 비활성화

scrollTo jQuery 플러그인을 사용할 때 애니메이션이 재생되는 동안 사용자가 스크롤하면 문제가 될 수 있습니다. 진행중. CSS 속성 "overflow"를 "hidden"으로 설정하여 스크롤을 비활성화할 수 있지만 스크롤 막대를 표시하되 비활성화된 상태로 유지하는 것이 더 바람직합니다.

이를 달성하려면 스크롤과 관련된 상호 작용 이벤트를 방지해야 합니다. 여기에는 마우스 및 터치 스크롤과 스크롤을 실행하는 버튼이 포함됩니다.

코드 구현

다음 JavaScript 코드는 스크롤을 일시적으로 비활성화 및 활성화하는 방법을 보여줍니다.

//스크롤 이벤트 방지
기능 PreventDefault(e) {
e.preventDefault();
}

// 스크롤과 관련된 키 방지
function PreventDefaultForScrollKeys(e) {
if (keys[e.keyCode ]) {

preventDefault(e);
return false;

}
}

// 스크롤 키 코드 사전
const 키 = {37:1, 38:1, 39:1, 40:1 };

// 스크롤 비활성화
function 비활성화Scroll() {
window.addEventListener('DOMMouseScroll', PreventDefault, false); // 이전 FF
window.addEventListener('wheel', PreventDefault, { Passive: false }); // 모던 데스크탑
window.addEventListener('touchmove', PreventDefault, { Passive: false }); // mobile
window.addEventListener('keydown', PreventDefaultForScrollKeys, false);
}

// 스크롤 활성화
function 활성화Scroll() {
window.removeEventListener('DOMMouseScroll ', 방지기본값, 거짓);
window.removeEventListener('wheel', PreventDefault, { Passive: false });
window.removeEventListener('touchmove', PreventDefault, { Passive: false });
window.removeEventListener('keydown', PreventDefaultForScrollKeys, false);
}

스크롤을 비활성화하려면 간단히 비활성화Scroll() 함수를 호출하세요. 스크롤을 다시 활성화하려면 활성화Scroll() 함수를 호출하세요.

위 내용은 스크롤바 가시성을 유지하면서 JavaScript에서 스크롤을 일시적으로 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!