jQuery用户界面向下滚动时的数据机定位问题
我有一个网页，它使用jQuery ui数据报警器的多个实例。我的网页将显示~80条记录，这超出了一个屏幕截图。
<% foreach (var record in Model) { %>
<div class="recordname"><%=record.name%></div>
<%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
// <-- additional html here -->
<% } %> 我已经将数据采集器的默认值设置为：
$(".date-pick").each(function() {
$(this).datepicker({
dateFormat: 'dd M yy',
showOn: 'button',
buttonImage: '/Images/datepickericon.png',
buttonImageOnly: true
});
});当页面第一次加载时，如果我单击屏幕上可见的任何datepicker图标(即，没有滚动)，则数据报警器将如预期的那样出现。
但是，如果我向下滚动页面，然后单击一个datepicker图标，则数据报警器不会出现在屏幕窗口中，而是显示在屏幕顶部附近。
有什么办法解决这个问题吗？
我正在使用：
- IE7
- asp.net mvc
- jquery.ui.datepicker.js (UI/API/1.8/Datepicker)
回答 11
Stack Overflow用户
发布于 2010-05-21 07:50:45
我想我已经解决了我的问题，但同时我想我可能发现了一个错误(?)在jquery数据交换代码中。
在我更进一步之前，让我简单地说，我对jquery / javascript很陌生，希望对下面的内容有任何意见。
为了概括这个问题，我正在使用asp.net mvc，并且我试图在一页上显示80条数据。对于初始视口中的任何数据项，数据采集器的位置都很好。但是，当我向下滚动时，仍然呈现在屏幕顶部附近。
我开始查看源代码并进行一些调试。我注意到，数据报警器向屏幕顶部偏移的程度与我滚动的量成正比，即更多的滚动=更大的偏移量。
我发现的代码中的关键问题(参见下面的代码)是，当代码计算出定位数据报头的位置时，它没有考虑到用户在屏幕上滚动了多远：
_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方法没有考虑到屏幕向下滚动了多少。
如果您将此行更新为以下内容，则解决了我提出的问题：
$.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height 这只需获取滚动条的位置并将其添加到offsetHeight以获得正确的位置。
为了充分披露，我不太清楚这是为什么，并将感谢一些洞察力。
我在这个问题上花了3天时间，并且研究了网络，这是我能想到的最好的。
有趣的是，jquery论坛中也有类似的查询：
读了这份报告，它似乎暗示了错误在以前的版本中被修正为1.8？
谢谢
Stack Overflow用户
发布于 2012-11-13 15:42:37
我也有同样的问题，我使用的是IE9，但是为了使用document.documentElement.scrollTop，我在JS代码上编辑了折叠行
$.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;这是因为document.documentElement.scrollTop返回0，对于我来说，上面的代码解决了我的问题
Stack Overflow用户
发布于 2012-10-12 19:50:39
我有这些问题，以及在IE9，并没有足够的感谢您的集体帮助。Chrome 22.0.1229.94m和FF 15.0.1没有为我展示这个问题。
我第一次尝试使用meta标记强制执行IE8仿真。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 都没有用。
然后，我按照建议编辑了jquery.ui.datepicker.js文件，以便通过考虑滚动来调整位置高度。这也不起作用。
最后，我将我的doctype从
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 至
<!DOCTYPE html>
成功了！！
我删除了强制IE8模拟的元标记，但保留了对datepicker文件所做的更改。我的成功可以是编辑的js和doctype的更改，或者仅仅是doctype的更改。
https://stackoverflow.com/questions/2834857
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号