您提供的程式碼在打開(kāi)模態(tài)框時(shí)禁用滾動(dòng)似乎是正確的。然而,有幾個(gè)可能導(dǎo)致問(wèn)題的原因:
openModal
函數(shù)。相反,它直接操作模態(tài)框的樣式。這意味著isModalOpen
變數(shù)沒(méi)有被設(shè)定為true
,disableFullPageScroll
函數(shù)也沒(méi)有被呼叫。要解決這個(gè)問(wèn)題,您應(yīng)該在按鈕被點(diǎn)擊時(shí)使用openModal
函數(shù):<button id="openModalButton" class="w3-button w3-black">打開(kāi)模態(tài)框</button>
closeModal
函數(shù)。應(yīng)該是這樣:
<span id="closeModalButton" class="w3-button w3-display-topright">×</span>
closeModal
函數(shù)沒(méi)有在全域作用域中定義,但它被從HTML中呼叫。這可能會(huì)導(dǎo)致錯(cuò)誤。要解決這個(gè)問(wèn)題,您應(yīng)該在全域作用域中定義closeModal
函數(shù):window.closeModal = closeModal;
disableFullPageScroll
和enableFullPageScroll
函式使用FullPage.js的方法來(lái)停用和啟用捲動(dòng)。如果您沒(méi)有使用FullPage.js,或者它沒(méi)有正確初始化,這些方法將無(wú)法運(yùn)作。您應(yīng)該檢查FullPage.js是否正確包含和初始化在您的專案中。
滾動(dòng)事件處理程序中的preventDefault
和stopPropagation
方法可能不足以阻止所有情況下的捲動(dòng)。在模態(tài)框打開(kāi)時(shí),您可能還需要將
overflow
樣式設(shè)定為hidden
,並在模態(tài)框關(guān)閉時(shí)將其重設(shè)為auto
:
function disableFullPageScroll() { $.fn.fullpage.setAllowScrolling(false); $.fn.fullpage.setKeyboardScrolling(false); document.body.style.overflow = 'hidden'; } function enableFullPageScroll() { $.fn.fullpage.setAllowScrolling(true); $.fn.fullpage.setKeyboardScrolling(true); document.body.style.overflow = 'auto'; }
請(qǐng)嘗試這些建議,並告訴我是否解決了您的問(wèn)題。