Question

仅当用户将设备方向从landscape更改为portrait时，我才希望页面滚动到确切的行（元素）仅（这是第一个条件），并且仅（如果modal已关闭（未打开，这是第二个条件）。

我很难用jQuery在代码中编写代码，这是到目前为止我一直在尝试的方法：

window.addEventListener("orientationchange", function() {
  if (window.matchMedia("(orientation: portrait)").matches) && $(".modal").hide();  {
    $('html, body').scrollTop($('#exact-line').offset().top);
  }  
});

如何为if正确设置modal来定义它不在页面上？（在这种情况下，我不能使用display: none）；
如何正确设置eventListner来更改方向，并使我的功能正常工作？

Answer 1

$(".modal").hide()

是隐藏模式的代码，不检查它是否已关闭。您需要根据情况使用$(".modal").is(':visible');。

但是，如果我对您的理解正确，那么您不仅要检查该模态现在不可见，而且要检查自页面加载以来从未可见。为此，我将定义一个布尔变量，并在打开模态后立即将其设置为false。我假设您使用的是Bootstap模态，'shown.bs.modal'是在打开模态时触发的事件：https://getbootstrap.com/docs/4.1/components/modal/#events

// variable to store the visibility
var modal_was_not_visible = true;

// listener for modal open
$('.modal').on('shown.bs.modal', function (e) {
  // set variable to false since modal is displayed
  modal_was_not_visible = false;
})

// use variable for your condition
window.addEventListener("orientationchange", function() {
  if (window.matchMedia("(orientation: portrait)").matches && modal_was_not_visible)  {
    $('html, body').scrollTop($('#exact-line').offset().top);
  }  
});

使用条件jQuery滚动到orientationchange上的元素

1 个答案: