jQuery 日期选择器不随页面滚动而移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12351871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Date picker not moving with page scroll
提问by Neil
I am using the standard jQuery UI datepicker ,However when i scroll the page the date picker remains fixed . Any ideas how to solve this ?
我正在使用标准的 jQuery UI 日期选择器，但是当我滚动页面时，日期选择器保持固定。任何想法如何解决这个问题？
Regards, Neil
问候， 尼尔
回答by Sem
The problem is that the datepicker is outsidethe divwith overflow: scroll;. If the datepicker was generated inside the container this wouldn't be a problem.
问题是日期选择器在with之外。如果日期选择器是在容器内生成的，这将不是问题。divoverflow: scroll;
Solution: http://jsfiddle.net/jbK6a/15/
解决方案：http: //jsfiddle.net/jbK6a/15/
I placed the datepicker behind the input with the beforeShowevent.
我将日期选择器放在beforeShow事件的输入后面。
And I used position: relative;on the scrollable container so that de absolute element listens to the container.
我position: relative;在可滚动容器上使用，以便绝对元素侦听容器。
回答by Jamey
With a little fiddling I managed to get the following:
稍微摆弄一下，我设法得到了以下信息：
Using this, the datepicker hides itself on page scroll. I believe there are jQuery methods to ascertain the scroll position and so with a bit more fiddling, you could then manually manipulate the datepicker and update its position based on this value...
使用它，日期选择器将自己隐藏在页面滚动中。我相信有 jQuery 方法可以确定滚动位置，因此稍微摆弄一下，您就可以手动操作日期选择器并根据此值更新其位置...
UPDATE: Just fiddled a bit and got: http://jsfiddle.net/jbK6a/18/which scrolls the datepicker, but it's really messy, any number of things can break it especially other collapsible elements. Fortunately Sem has a far better and cleaner solution :)
更新：只是稍微摆弄了一下，得到：http: //jsfiddle.net/jbK6a/18/滚动日期选择器，但它真的很乱，任何数量的东西都可以破坏它，尤其是其他可折叠元素。幸运的是，Sem 有一个更好、更干净的解决方案:)
(Thought I'd add my code anyway though)
（虽然我想我会添加我的代码）
回答by Spartanicus
To solve this problem in jQuery UI 1.11.4 I added a .bind() event to the end of the datepicker instantiation:
为了在 jQuery UI 1.11.4 中解决这个问题，我在 datepicker 实例化的末尾添加了一个 .bind() 事件：
$("*selector*").datepicker({
*settings*
}).bind('click',function () {
$("#ui-datepicker-div").appendTo("*other-selector*");
});
In my case, the "other-selector" was $(this).closest('the-date-input-parent'). This picks up the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) and moves it to a location somewhere else within the document. This can be done for multiple datepickers on the same page.
就我而言，“其他选择器”是 $(this).closest(' the-date-input-parent')。这将选取单个 #ui-datepicker-div 框（jQuery UI 将其放置在 DOM 的末尾）并将其移动到文档中的其他位置。这可以为同一页面上的多个日期选择器完成。
The other-selectorshould have position: relative; set so that the absolutely positioned #ui-datepicker-div becomes positioned relative to the new parent. Once so, it scrolls just fine.
的其它选择器应当具有的位置是：相对于; 设置为绝对定位的 #ui-datepicker-div 相对于新父级定位。一旦这样，它滚动得很好。
This solution was the easiest fix to this problem (though it took a lot of time and searching to come to this conclusion) and allowed the datepicker to work correctly on mobile devices and tablets where it would otherwise be unusable.
这个解决方案是解决这个问题的最简单的方法（虽然花了很多时间和搜索才得出这个结论），并允许日期选择器在移动设备和平板电脑上正常工作，否则它就无法使用。
回答by parnas
Just remove height: 100% rule from html selector. That's solves problem.
只需从 html 选择器中删除 height: 100% 规则。这就是解决问题。
回答by Bryce Snyder
Couldn't find any answers on this using Bootstrap and datepicker that was having an issue with the datepicker staying attached to the element when scrolling on a modal. This was my solution:
使用 Bootstrap 和 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();
})();
})();
If following Bootstrap & Datepicker syntax, this should play nicely.
如果遵循 Bootstrap 和 Datepicker 语法，这应该可以很好地发挥作用。
