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

I have this modal dialog box defined:

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

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

I'm using this jQuery ajax call to load the dialog's content every time it's opened:

我正在使用这个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);
                }
            });

I want the vertical scrollbar to be scrolled all the way to the top every time this dialog box opens.

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

However, here's what's happening: The first time the dialog box is opened, the content is scrolled to the top. If I scroll down within the dialog box, close the dialog box, and reopen it (which relaunches that ajax function), the vertical scrollbar is in the same position as when I closed it. However, at that point, if I scroll within the dialog box, up or down, it pops up to the top first and starts scrolling from there. So, it's getting the command, but not actually moving the scrollbar to the top until you start scrolling.

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

How can I fix this to start at the top immediately whenever the dialog box is opened?

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

1 个解决方案

#1

Can't say why it's doing what it's doing, but I found a work-around. I moved the scrollTop(0) command to the beforeSend function, and added a trigger("scroll") to the "complete" function:

不能说为什么它正在做它正在做的事情,但我找到了解决办法。我将scrollTop(0)命令移动到beforeSend函数,并向“完成”函数添加了一个触发器(“scroll”):

$.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");
            }
        });