侧面板打开时防止主体滚动

Question

我通过单击我的按钮 cd-btn 来切换我的面板，它调用一个新的 class .cd-panel.is-visible

 jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
    event.preventDefault();
    $('.cd-panel').toggleClass('is-visible');
});

可见 class:

 .cd-panel.is-visible {
  visibility: visible;}

我想阻止正文在面板打开或可见时滚动。到目前为止，我通过以下方式实现了这一目标：

$(".cd-panel").mouseenter(function(){
  $("body").css("overflow", "hidden"); 
}).mouseleave(function(){
  $("body").css("overflow", "visible");
});

只有当我用鼠标进入或离开面板时才有效。但我想通过打开面板来实现这一点。如何在面板打开时将 overflow:hidden 样式添加到正文中，然后当我关闭它时它会使溢出变为可见。我还想在我的面板打开时将 position:fixed 添加到正文中，并且在关闭面板后它将 return 到 position:relative

Answer 1

这里设置.css:

$('.cd-btn').on('click', function(event){
  event.preventDefault();
  $('.cd-panel').toggleClass('is-visible');
  if ($('.cd-panel').is(":visible"))
    $("body").css("overflow", "hidden");
  else
    $("body").css("overflow", "visible");
});

Answer 2

我可能已经通过阅读您的（OP）和@Praveen-Kumar 评论找出问题所在。

不是检查 :visible 而是检查元素是否有 class is-visible ，这最终决定元素是否可见。

所以你的代码变成了...

$('.cd-btn').on('click', function(event){
  event.preventDefault();
  $('.cd-panel').toggleClass('is-visible');
  if ($('.cd-panel').hasClass("is-visible")) // Changed this line from your link.
    $("body").css("overflow", "hidden");
  else
    $("body").css("overflow", "visible");
});

Answer 3

$('.cd-btn').on('click', function(event){ 
    event.preventDefault(); 
    $('.cd-panel').toggleClass('is-visible'); 
    if ($('.cd-panel').hasClass("is-visible")) { 
        $('body').css({
            height: '100%',
            overflow: 'hidden'
        })
    } else {
        $('body').css({
          height: 'auto',
          overflow: 'visible'
        }) 
    }
});

侧面板打开时防止主体滚动

Prevent body from scrolling when side panel opens

html

css

jquery

panel