Question

所以我设法add scrollbars to large jQM popups with css('overflow-y', 'scroll')。但是当弹出窗口大于用户的视口时，如何才能？

我尝试使用jquery-visible插件，但我无法回复：

$('#test-button').on('click', function(e) {     
  $('#confirmDialog').popup('open');

  // https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport  

  if(!$('#confirmDialog').visible(true)) {
    alert('Popup not fully visible - add overflow scrolling');
    $('#confirmDialog').css('overflow-y', 'scroll'); 
  }  
});

Answer 1

您可以使用

overflow-y: auto

这使得滚动条仅在需要时可见。

更新了 FIDDLE

<强>更新

您也可以将弹出窗口的内容设置为可滚动，以便标题栏保持在视图中：

#confirmDialog .ui-content {
    overflow-y: auto;
}

$('#confirmDialog').on({
  popupbeforeposition: function() {
      var maxHeight = $(window).height() - 120;
      $('#confirmDialog .ui-content').height(maxHeight);
  }
});

<强> DEMO

Answer 2

我的弹出窗口太大，尽管是由于可搜索的列表。因为我想在仅滚动列表的同时将搜索字段保持在顶部，所以我必须这样做：

$("#confirmDialog").on({
    popupbeforeposition: function (e, ui) {
        var maxHeight = $(window).height() - 100 + "px";
        $("#confirmDialog .ui-content").css("max-height", maxHeight);
    },
    popupafteropen: function (e, ui) {
        var maxHeight = $(window).height() - 150 + "px";
        $("#confirmDialog .ui-content ul").css("max-height", maxHeight).css("overflow-y", "scroll");
    }
});

请记住，一旦分配为字符串，就不要对maxHeight进行算术运算，因此这是行不通的：

$("#confirmDialog .ui-content").css("max-height", maxHeight - 50);

如何检查jQM弹出窗口是否适合用户的视口？

2 个答案: