jQuery日期选择器不随页面滚动移动
我正在使用标准的jQuery UI datepicker，但是当我滚动页面时，日期选择器仍然是固定的。 任何想法如何解决这个问题？
http://jsfiddle.net/jbK6a/3/
问候，尼尔
问题是datepicker在div 之外 overflow: scroll; 。 如果在容器内生成了datepicker，那么这不是问题。
解决方案： http ： //jsfiddle.net/jbK6a/15/
我使用beforeShow事件将beforeShow放在输入后面。
我使用的position: relative; 在可滚动容器上，以便de absolute元素侦听容器。
有点摆弄我设法得到以下内容：
使用此，datepicker隐藏在页面滚动上。 我相信有jQuery方法来确定滚动位置，所以稍微摆弄一下，你可以手动操作datepicker并根据这个值更新它的位置……
更新 ：只是摆弄了一下，得到： http ： //jsfiddle.net/jbK6a/18/滚动日期选择器，但它真的很乱，任何数量的东西都可以打破它，尤其是其他可折叠的元素。 幸运的是，Sem有一个更好，更清洁的解决方案:)
（不过我以为我会添加我的代码）
为了在jQuery UI 1.11.4中解决这个问题，我在datepicker实例化的末尾添加了一个.bind（）事件：
$("*selector*").datepicker({ *settings* }).bind('click',function () { $("#ui-datepicker-div").appendTo("*other-selector*"); });
在我的例子中，“other-selector”是$（this）.closest（’ the-date-input-parent ‘）。 这会选择单个#ui-datepicker-div框（jQuery UI放在DOM的末尾）并将其移动到文档中其他位置。 这可以在同一页面上为多个日期选择器完成。
另一个选择器应该有位置：relative; 设置为绝对定位的#ui-datepicker-div相对于新父级定位。 一旦这样，它滚动就好了。
这个解决方案是解决这个问题的最简单方法（虽然花了很多时间并且搜索得出这个结论）并且允许日期选择器在移动设备和平板电脑上正常工作，否则它将无法使用。
使用Bootstrap和datepicker找不到任何答案，这个问题与在模式上滚动时保持连接到元素的datepicker有关。 这是我的解决方案：
var dateModals = (function() { 'use strict'; var currentInput = ''; var setPos = function() { if (currentInput === '') return false; var $datepicker = $('.datepicker'); var topPos = currentInput.offset().top + currentInput.outerHeight(); if ($datepicker.hasClass('datepicker-orient-bottom')) { topPos -= $datepicker.outerHeight() + currentInput.parent('.date').outerHeight(); } $datepicker.css('top', topPos); }; var attachEvents = () => { $('.modal').on('scroll', function() { setPos(); }); $('.modal').on('click', '.date input.form-control', function() { currentInput = $(this); }); }; var initialize = (function() { attachEvents(); })(); })();
如果遵循Bootstrap和Datepicker语法，这应该很好。
只需删除高度：来自html选择器的100％规则。 这解决了问题。