如何防止主體使用側推菜單滾動

Question

我正在嘗試將推送側菜單插件（響應式菜單）正確實現到 wordpress 主題中。 基於SO @Congrim 的回答，我設法實現了一種在推送菜單打開時在滾動時鎖定body的方法（包括固定header在內的所有元素），除了交互式鏈接class=edge-ils edge-ils-with-scroll edge-ils-light它仍然會在推菜單打開時上升。

我已將此序列保存到congrim.js文件中，並將腳本放入functions.php文件中的主題中：

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    }
    else {
        $('body').addClass('lock-scroll');
    }
}


/* I've implemented `onclick="lockScroll();"` in button element, 
 * using this sequence in the same congrim.js file:
 */    

$(document).ready(function() {
    $('#responsive-menu-pro-button').click(function() {
       lockScroll();
    }); 
});

刪除 jQuery 包裝不會在瀏覽器控制台中出現任何錯誤（在 Chrome 中測試）可能仍然是在 wordpress 中包裝這樣的代碼的糟糕方法（？）在這些情況下，不幸的是， overflow: hidden; 不適用，在推送側菜單打開時，我無法在 CSS 文件/部分中使用此類：

.lock-scroll {
    overflow: hidden;
}

該代碼將只允許我使用

.lock-scroll {
    position: fixed;
}

問題：
有沒有可能強制代碼實現overflow: hidden; * 或任何其他解決方法，以使交互式鏈接class=edge-ils edge-ils-with-scroll edge-ils-light在推邊菜單打開時不會上升，以保持固定在查看器被點擊的位置在打開菜單之前？

請只關注交互鏈接問題，場景的其余部分都很好（ header和logo都應有盡有，背景圖片也應如此）。

LE: * overflow: hidden; 在顯示/隱藏滾動條期間，它看起來會在菜單打開/關閉時產生不需要的body移動效果，這在此階段不會發生。

LE2： congrim.js文件已被 Outsource WordPress 替換為body-lock.min.js ，請參閱下面的解決方案。

網站測試頁面在這里。

Answer 1

請檢查下面給出的解決方案。

第 1 步：添加此 CSS .scroll-lock{position:fixed !important;} 。

第 2 步：添加此 JS。

$(document).ready(function() {
    var windowTop = 0;
    var menuOpen = 0;
    var offsetContainerList = 0;

    $('#responsive-menu-pro-button').click(function() {
        var offsetScrollList = $('.edge-ils-item-link:first').offset().top; 

        if ($('html').hasClass('scroll-lock')) {
            $('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  if (menuOpen==0) {
                      menuOpen = 1;
                      $('html').removeClass('scroll-lock');  
                      $('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
                      $('html').scrollTop(windowTop); //scroll to original position
                  }
                  else {   
                      menuOpen = 0;             
                  }
            });
        }
        else {                
            windowTop = $(window).scrollTop();
            offsetContainerList = $('.edge-ils-content-table').offset().top;  
            $('html').addClass('scroll-lock');      
            $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
        }      
    }); 
}); 

就是這樣！

Answer 2

您的滾動不是基於導航器的自然滾動，您在某處有一個 JS 交換類來模擬滾動（ edge-appeared 、 edge-up 、 edge-down ）。

在推送側菜單打開時，這些類被重置， overflow-hidden不會改變這一點。

您需要找到哪個 JavaScript 正在交換這些類並阻止它這樣做，我很樂意為您提供進一步的幫助，但是您有太多的 JS 文件，需要相當長的時間來完成所有這些。 如果您成功制作了一個最小、完整和可驗證的示例，請在此處發布。

Answer 3

請在您的自定義 js 文件中添加以下代碼。

 jQuery('#responsive-menu-pro-button').click(function(){
    var menu_active = jQuery(this).hasClass('is-active');
    if(menu_active){
        jQuery('body').css('position','fixed');
    }else{
       jQuery('body').css('position','static');
    }
});

我希望它能幫助你。

謝謝