javascript - 如何确定 jquery 对话框中当前可见的垂直位置在哪里？

Question

我有一个案例，我正在使用 jquery ui dialog并且我在对话框中有任何 html 表格，其中对话框的高度是固定的:

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

我通过单击按钮调用AJAX 查询，我想使用 jquery UI blockUI plugin显示“正在加载”消息。像这样:

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

我遇到的问题是对话框中的内容比对话框的高度长我给定的对话框是 FIXED 高度，因此导致对话框有一个垂直滚动条。

有滚动条很好(这实际上是我想要的)但链式 react 是因此，根据用户是否向下滚动，blockUI 消息不会垂直居中(甚至在屏幕上不可见)。

问题:无论如何，我是否可以检测到具有垂直滚动条的对话框中的可见区域，以正确地垂直对齐 block 消息？

如上所示，您可以看到它被硬编码为距顶部 200 像素，因此如果用户没有向下滚动，它会很好用，但如果用户完全向下滚动，您将看不到消息

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

$("#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

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

对于大小为 1000 像素的窗口，top:800 == bottom:200

重要的问题是如何找出滚动距离顶部的距离。为此，让我们使用一个函数:

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

现在，将其应用到您的 block 中:

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

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

---

对 MKaama 的回应:

我提出的答案没有循环，没有计时器，也没有重复操作的建议。没有

Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU