모달이 열려 있을 때 스크롤을 비활성화하는 방법 - 전체 페이지 JS

Question

제가 원하는 것은 모달이 열려 있을 때 전체 페이지에 대해 JavaScript 스크롤을 비활성화하는 것입니다. 문제는 모달을 열고 스크롤하려고 하면 콘텐츠가 실제 웹 페이지인 모달 뒤로 이동하므로 이를 비활성화하고 싶다는 것입니다. 모달이 열리면 배경이 고정되어야 합니다.

            

                
                모달 상자 열기
            
    
    
    



    

        

            ×


            

                

                    

                        

                    
                    

                        
저희 회사에는 목공에 대한 열정이 있으며 이는 모든 제작 및 인테리어 디자인 프로젝트에서 드러납니다. 우리는 아름다운 만큼 기능적인 맞춤형 목재 가구, 비품 및 액센트 제작을 전문으로 합니다
                    
                
            


            
        
    



<스크립트>
    $(문서).ready(함수() {
        var isModalOpen = false;

        // 모달이 열려 있을 때 FullPage.js 스크롤을 비활성화합니다.
        기능 비활성화FullPageScroll() {
            $.fn.fullpage.setAllowScrolling(false);
            $.fn.fullpage.setKeyboardScrolling(false);
        }

        // 모달이 닫힐 때 FullPage.js 스크롤을 활성화합니다.
        함수 활성화FullPageScroll() {
            $.fn.fullpage.setAllowScrolling(true);
            $.fn.fullpage.setKeyboardScrolling(true);
        }

        //모달박스 열기
        함수 openModal(modalId) {
            document.getElementById(modalId).style.display = '블록';
            isModalOpen = true;
            비활성화FullPageScroll();
        }

        // 모달 상자를 닫습니다.
        함수 closeModal(modalId) {
            document.getElementById(modalId).style.display = '없음';
            isModalOpen = 거짓;
            활성화FullPageScroll();
        }

        // 버튼 클릭 이벤트를 처리하여 모달을 열고 닫습니다.
        $('#openModalButton').on('클릭', function() {
            openModal('id01'); // 'id01'을 모달 ID로 바꿉니다.
        });

        $('#closeModalButton').on('클릭', function() {
            closeModal('id01'); // 'id01'을 모달의 ID로 바꿉니다.
        });

        // 스크롤 이벤트 처리
        $(window).on('스크롤', function(event) {
            if (isModalOpen) {
                event.preventDefault();
                event.stopPropagation();
            }
        });
    });

Answer 1

제공한 코드는 모달이 열릴 때 스크롤을 비활성화하는 데 올바른 것 같습니다. 그러나 문제의 원인은 여러 가지가 있습니다.

1. 모달 상자를 여는 버튼은 스크립트에 정의한 openModal函数。相反，它直接操作模态框的样式。这意味着isModalOpen变量没有被设置为true，disableFullPageScroll函数也没有被调用。要解决这个问题，您应该在按钮被点击时使用openModal 기능을 사용하지 않습니다:

으아악

2. 모달 상자를 닫는 태그는 closeModal 기능을 사용하지 않습니다. 다음과 같아야 합니다:

으아악

3. closeModal函数没有在全局作用域中定义，但它被从HTML中调用。这可能会导致错误。要解决这个问题，您应该在全局作用域中定义closeModal함수는 전역 범위에서 정의되지 않고 HTML에서 호출됩니다. 이로 인해 오류가 발생할 수 있습니다. 이 문제를 해결하려면 전역 범위에서
함수를 정의해야 합니다.

으아악

4. disableFullPageScroll和enableFullPageScroll

   함수는 FullPage.js 메서드를 사용하여 스크롤을 비활성화 및 활성화합니다. FullPage.js를 사용하지 않거나 올바르게 초기화되지 않은 경우 이러한 방법은 작동하지 않습니다. FullPage.js가 프로젝트에 올바르게 포함되고 초기화되었는지 확인해야 합니다.

5. preventDefault和stopPropagation方法可能不足以阻止所有情况下的滚动。在模态框打开时，您可能还需要将的overflow样式设置为hidden，并在模态框关闭时将其重置为auto

   스크롤 이벤트 핸들러:

으아악

다음 제안 사항을 시도해보고 문제가 해결되면 알려주세요. 🎜