javascript-如何滚动Flow JQuery UI对话框
作者:互联网
我一直在尝试使用跟随滚动与用户滚动一起移动对话框,但是没有成功
<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一起使用时,无法正确获取主选项容器,因此它实际上无法工作…
这是一个小的脚本,它将在滚动窗口时四处移动对话框:
(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上的工作示例.
标签:jquery-dialog,jquery-ui,javascript,jquery 来源: https://codeday.me/bug/20191201/2084006.html