JQuery 检查 div 是否显示 flex 并将正文溢出设置为隐藏

【问题标题】：JQuery check if div display flex and set body overflow to hidenJQuery 检查 div 是否显示 flex 并将正文溢出设置为隐藏
【发布时间】：2023-02-14 18:51:19
【问题描述】：

我有一个弹出窗口，我想每隔一段时间检查一次。一旦它的 CSS display 设置为 flex/ 或 block，body 的 overflow 应该设置为 hidden 因为我不想滚动，因为它是一个长表格.

function checkPopup() {
  if ($(".bdp-poup").css("display", "flex")) {
    $('.body').css('overflow', 'hidden');
  } else {
    $('.body').css('overflow', 'auto');
  }
}

setInterval(checkPopup, 1000);

【问题讨论】：

它更像是if ($(".bdp-poup").css("display") == "flex")
1）在你的if条件中使用css()的getter，而不是setter 2）使用MutationObserver来检测正在显示的元素，而不是间隔。

标签： jquery

【解决方案1】：

您应该结合两个功能：

保存元素显示属性状态，然后在某个时间间隔检查此属性是否已更改

检查元素属性是否显示为flex或none，将此函数调用到第一个。

var myElement = $(".bdp-poup");
var originalDisplay = myElement.css("display");

// Check for changes to the display property
setInterval(function() {
  if (myElement.is(":visible") && myElement.css("display") !== originalDisplay) {
    console.log("Display property has changed to " + myElement.css("display"));
    checkVisibility();
    originalDisplay = myElement.css("display");
  }
}, 100);
  
// Check if display flex or none
function checkVisibility() {
  if (myElement.css("display") == "flex") {
    // Element has display: flex
  } else if (myElement.css("display") == "none") {
    // Element has display: none
  } else {
    // Element has a different display value
  }
}

.bdp-poup {
  display: flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdp-poup">
  Lorem ipsum
</div>

【讨论】：