8

在阅读了很多关于该主题的内容后，我仍然对如何解决问题一无所知。为了澄清问题，我希望日历与关联的输入控件一起滚动，而不是固定在任何屏幕位置。这是没有滚动的图像：（这也是我想在滚动上保留的） 在此处输入图像描述

这是滚动时的图像：（这不是我想要的）

在此处输入图像描述

任何提示将不胜感激。更新：这是一个密切描述问题的链接，我希望日历在滚动时粘在控件上。

4

1 回答 1

14

我不确定你的是否是可滚动的 div，但这里发生的问题是 jQuery UI 日期选择器在可滚动的 div 内不会随 HTML 内容移动。

这是一个演示http://jsfiddle.net/joycse06/m6A5q/embedded/result/演示问题的小提琴。单击输入并尝试滚动该 div。

发生这种情况是因为 jQuery UI 将日历 UI 创建为容器可滚动 div 的位置absolute relative或不document作为位置。window因此，当可滚动 div 滚动时，主窗口的滚动上下文不会更改，因此 datepicker 日历不会跟随该 div 中的其他 html 元素。

因此，解决方案可以是在滚动该 div 时隐藏日历，这很有意义，如果输入不可见，您可以隐藏 datepicker 日历。所以更新的代码将是

var datePicker = $('#datepicker').datepicker();

$(".demo").scroll(function() {
  datePicker.datepicker('hide');
  $('#datepicker').blur();
});

$(window).resize(function() {
  datePicker.datepicker('hide');
  $('#datepicker').blur();
});

滚动容器 div 或窗口时，它将隐藏日期选择器。这是一个工作小提琴http://jsfiddle.net/joycse06/m6A5q/2/

我正在使用，$('#datepicker').blur();因为当用户滚动.demo日历隐藏但input仍然集中，所以当他向后滚动时，他可能会变得困惑。所以当我模糊它时，他将不得不input再次点击，日期选择器就会出现。

于 2012-05-17T17:51:38.963 回答