如何确定jquery对话框中当前可见垂直位置的位置？

Question

我有一个案例,我正在使用一个jquery ui对话框,我在对话框中有任何html表,对话框是固定高度的:

$("#modalDialogContainer").dialog({
    resizable: false,
    height: 700,
    autoOpen: false,
    width: 1050,
    modal: true,

我通过按钮单击调用AJAX查询,我想使用jquery UI blockUI插件来显示"加载"消息.像这样的东西:

   $("#myTableInsideDialog").block({
                css: {
                    top: '200px',
                    bottom: "",
                    left: ''
                },
                centerY: false, baseZ: 2000, message: $("#SavingMessage")
            });

我的问题是对话框中的内容比对话框的高度长,我给对话框的FIXED高度,这使对话框有一个垂直滚动条.

滚动条很好(这实际上是我想要的),但是因为这取决于用户是否向下滚动,所以blockUI消息不是垂直居中(或甚至在屏幕上可见).

问题:无论如何,我可以检测到对话框中有哪些可见区域,这些区域有一个垂直滚动条,可以正确地垂直对齐块消息？

上面你可以看到它的硬编码从顶部是200px所以如果用户没有向下滚动它会很好但如果用户已经向下滚动你就看不到消息

简而言之,如果我在卷轴的顶部,那么我会这样:

$("#myTableInsideDialog").block({
            css: {
                top: '200px',
                bottom: "",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

如果我在滚动的底部,那么我会想要这个:

 $("#myTableInsideDialog").block({
            css: {
                top: '',
                bottom: "200px",
                left: ''
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

Answer 1

我不会在顶部和底部属性之间交替:

对于大小为1000px的窗口,top:800== bottom:200

重要的问题是,如何从顶部找出您的滚动距离.为此,我们使用一个函数:

function calcTopLocal() {
        var s = $('#modalDialogContainer').scrollTop() + 'px';
        return s;
}

现在,将它应用于您的块:

 $("#myTableInsideDialog").block({
            css: {
                top: calcTopLocal()
            },
            centerY: false, baseZ: 2000, message: $("#SavingMessage")
        });

这可以通过多种方式进行重构.重要的细节是使用scrollTop()和应用样式.

对MKaama的回应:

我提出的答案没有循环,没有计时器,也没有重复动作的建议.没有

反复调用js函数只是为了保持位置固定是一种过度杀伤,浪费CPU