向下滚动网页时jQuery ui datepicker定位问题 [英] jQuery ui datepicker positioning problem when scrolling down webpage
问题描述
我有一个使用 jQuery ui datepicker 的多个实例的网页.我的网页将显示约 80 条记录，超出了单个屏幕截图的范围.
I have a webpage that uses multiple instances of the jQuery ui datepicker. My webpage will display ~80 records which extends beyond a single screenshot.
<% foreach (var record in Model) { %>
<div class="recordname"><%=record.name%></div>
<%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
// <-- additional html here -->
<% } %>
我已将日期选择器的默认设置如下:
I have set the defaults of my datepicker as follows:
$(".date-pick").each(function() {
$(this).datepicker({
dateFormat: 'dd M yy',
showOn: 'button',
buttonImage: '/Images/datepickericon.png',
buttonImageOnly: true
});
});
当页面首次加载时，如果我单击屏幕上可见的任何日期选择器图标(即不滚动)，则日期选择器会按预期显示.
When the page first loads, if I click any datepicker icon that is visible on screen (i.e. without scrolling) then the datepicker appears as expected.
但是，如果我向下滚动页面然后单击日期选择器图标，则日期选择器不会出现在屏幕窗口中，而是直接呈现在屏幕顶部附近.
However, if I scroll down the page and then click a datepicker icon, the datepicker does not appear in the screen window but is instead rendered right back near the top of the screen.
任何想法如何解决这个问题?
Any ideas how to solve this?
我正在使用:
- IE7
- asp.net mvc
- jquery.ui.datepicker.js (UI/API/1.8/Datepicker)
推荐答案
我想我已经设法解决了我的问题，但同时我想我可能在 jquery ui datepicker 代码中发现了一个错误 (?).
I think I have managed to resolve my issue but at the same time I think I may have uncovered a bug (?) in the jquery ui datepicker code.
在我进一步讨论之前，让我说我是 jquery/javascript 的新手，并希望在下面提供任何输入.
Before I go further then let me just say that I am new to jquery / javascript and would appreciate any input on the below.
回顾一下这个问题，我正在使用 asp.net mvc 并且我试图在页面上显示约 80 个日期选择器.对于初始视口中的任何日期选择器，日期选择器的位置很好.但是，当我向下滚动时，日期选择器仍然呈现在屏幕顶部附近.
To recap the problem, I am using asp.net mvc and I am trying to show ~80 datepickers on a page. For any datepicker in the initial viewport, the datepickers position fine. However, when I scroll down the datepickers are still rendered near the top of the screen.
我开始查看源代码并进行一些调试.我注意到的是，日期选择器向屏幕顶部偏移的程度与我滚动的量成正比，即更多的滚动 = 更大的偏移.
I started to view the source code and do some debugging. What I noticed is that the extent to which the datepicker was offset towards the top of the screen was directly proportional to the amount by which I had scrolled i.e. more scroll = greater offset.
我发现的代码中的关键问题(见下文)是，当代码计算出日期选择器的位置时，它没有考虑用户滚动到屏幕下方的距离:
The key issue in the code I found (see below) is that when the code works out where to position the datepicker it does not take into account how far down the screen a user has scrolled:
_showDatepicker:
function(input) {
input = input.target || input;
//....more code...
if (!$.datepicker._pos) { // position below input
$.datepicker._pos = $.datepicker._findPos(input);
$.datepicker._pos[1] += input.offsetHeight; //add the height
}
在最后一行中，offsetHeight 方法不考虑您向下滚动屏幕的距离.
In the final line the offsetHeight method does not take account of how much you have scrolled down the screen by.
如果您将此行更新为以下内容，那么这将解决我提出的问题:
If you update this line to the following then this solves the issue I have raised:
$.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height
这只是获取滚动条位置并将其添加到 offsetHeight 以获得正确位置.
This simply gets the scrollbar position and adds it to offsetHeight to get the correct position.
为了充分披露，我不确定为什么会这样，希望得到一些见解.
In the interests of full disclosure I am not exactly sure why this works and would appreciate some insight.
我在这个问题上花了大约 3 天的时间并研究了网络，这是我能想到的最好的方法.
I have spent ~ 3 days on this issue and researched the web and this is the best I can come up with.
有趣的是，jquery 论坛里也有类似的查询:
Interestingly, there was a similar query in the jquery forums:
阅读报告似乎表明该错误已在 1.8 之前的版本中修复?
Reading the report it seemed to suggest that the bug was fixed in a prior version to 1.8?
谢谢
这篇关于向下滚动网页时jQuery ui datepicker定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
