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

Question

我通过单击调用新类 .cd-panel.is-visible 的按钮 cd-btn 来切换我的面板

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

.is-visible 类:

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

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

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

仅当我用鼠标进入或离开面板时才有效。但我想通过打开面板来实现这一点。 当面板打开时如何将溢出:隐藏样式添加到主体，然后当我关闭它时它会将溢出变为可见。 我还想在我的面板打开时将 position:fixed 添加到 body 并在关闭面板后返回到 position:relative

Answer 1

通过阅读您的(OP)和@Praveen-Kumar 评论，我可能已经弄清楚问题出在哪里。

不是检查 :visible 而是检查元素是否具有 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");
});