Question

我定义了这个模态对话框：

$("#calendar_dialog").dialog({
            autoOpen: false,
            modal: true,
            draggable: true,
            resizable: true,
            width: 520,
            height: "auto",
            create: function(){ $(this).css("maxHeight",300); },
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        });

我使用此jQuery ajax调用来在每次打开时加载对话框的内容：

    var calendar_dialog = $("#calendar_dialog");

$.ajax({
                url:"/cfc/test.cfc",
                data:{
                    method: "getCalendarEventDetails"
                },
                beforeSend: function(){
                    calendar_dialog.html('<div style="text-align:center; width:100%;"><img src="/images/pagetemplate/ajax-loader-lg.gif" /></div>');
                    calendar_dialog.dialog("open");
                },
                success: function(returned_results){
                    calendar_dialog.html(returned_results)
                },
                complete: function(){
                    calendar_dialog.scrollTop(0);
                }
            });

每次打开此对话框时，我都希望垂直滚动条一直滚动到顶部。

然而，这里发生了什么：第一次打开对话框时，内容会滚动到顶部。如果我在对话框中向下滚动，关闭对话框，然后重新打开它（重新启动ajax函数），垂直滚动条与我关闭时的位置相同。但是，此时，如果我在对话框中向上或向下滚动，它会首先弹出到顶部并从那里开始滚动。因此，它获取命令，但实际上并没有将滚动条移动到顶部，直到您开始滚动。

如何在对话框打开时立即从顶部开始修复此问题？

Answer 1

不能说它为什么做它正在做的事情，但我找到了解决办法。我将scrollTop（0）命令移动到beforeSend函数，并向＆＃34;完成＆＃34;添加了一个触发器（＆＃34; scroll＆＃34;）。功能：

$.ajax({
            url:<cfoutput>"/cfc/test.cfc"</cfoutput>,
            data:{
                method: "getCalendarEventDetails"
            },
            beforeSend: function(){
                calendar_dialog.scrollTop(0);
                calendar_dialog.html('<div style="text-align:center; width:100%;"><img src="/images/pagetemplate/ajax-loader-lg.gif" /></div>');
                calendar_dialog.dialog("open");
            },
            success: function(returned_results){
                calendar_dialog.html(returned_results)
            },
            complete: function(){
                calendar_dialog.trigger("scroll");
            }
        });

jQuery scrollTop（0）仅在滚动后生效

1 个答案: