如何滚动流JQuery UI对话框

How to Scroll Flow JQuery UI Dialog

本文关键字：JQuery UI 对话框 滚动 何滚动      更新时间：2023-09-26

我一直试图使用跟随滚动来将对话框与用户滚动一起移动，但没有成功

<script>
$(function() {
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-report-problem-form" ).dialog({
        autoOpen: true,
        height: 550,
        width: 700,
        modal: true,
        buttons: {
            "<?= $this->translate('REPORT_PROBLEM'); ?>": function() {
                reportProblem();
            },
            "<?= $this->translate('CANCEL'); ?>": function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
        }
    });
    $.scrollFollow("#dialog-report-problem-form",{speed: 10}); 
});
</script>


<div id="dialog-report-problem-form" title="<?= $this->translate('REPORT_PROBLEM'); ?>">
    <?= $this->form ?>
</div>

我收到错误

 box.cont.offset() is null

有人知道如何修复或其他基于jquery的解决方案来跟踪用户滚动吗？

插件scrollFollow似乎很有缺陷，开发中断（上次更新是在2008年）

  • 当您将其与$.scrollFollow()一起使用时，不会设置默认选项值，因此会出现很多类似的错误
  • 当它与$(...).scrollFollow一起使用时，主选项container没有正确获得，因此它不能真正工作

下面是一个小脚本，当窗口滚动时，它会移动对话框：

(function(wnd, $) {
        // query for elements once
    var $dlg = $("#dialog-report-problem-form").parent(),
        $wnd = $(wnd),
        // get the initial position of dialog
        initialTop = $dlg.offset().top - $wnd.scrollTop();
    $wnd.scroll(function() {
            // when qscrolling, animate the 'top' property
            $dlg.stop()
                .animate({
                    "top": ($wnd.scrollTop() + initialTop) + "px"
                }, "slow");
        })
        .resize(function() {
            // in case of resize, re-set the initial top position of the dialog
            initialTop =  $dlg.offset().top - $wnd.scrollTop();
        });
    // if you close/open the dialog, it will mess up the 'initialTop'
    // this will re-set the correct 'initialTop' when the dialog opens again
    $dlg.bind('dialogcreate dialogopen', function(e) {
        initialTop = $dlg.offset().top - $wnd.scrollTop();
    });
})(window, jQuery);

jsfiddle上的工作示例。

相关文章：