向下滚动网页时jQuery ui datepicker定位问题

Question

我有一个网页,它使用jQuery ui datepicker的多个实例.我的网页将显示约80条记录,这些记录超出了单个屏幕截图.

<% foreach (var record in Model) { %>
    <div class="recordname"><%=record.name%></div>
    <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
    // <-- additional html here -->
<% } %> 

我已经设置了datepicker的默认值,如下所示:

    $(".date-pick").each(function() {
    $(this).datepicker({
        dateFormat: 'dd M yy',
        showOn: 'button',
        buttonImage: '/Images/datepickericon.png',
        buttonImageOnly: true
        });
    });

当页面首次加载时,如果我单击屏幕上可见的任何日期选择器图标(即不滚动),则会按预期显示日期选择器.

但是,如果我向下滚动页面然后单击一个日期选择器图标,则日期选择器不会出现在屏幕窗口中,而是会在屏幕顶部附近向右渲染.

任何想法如何解决这个问题？

我在用:

• IE7
• asp.net mvc
• jquery.ui.datepicker.js(UI/API/1.8/Datepicker)

Answer 1

我也有同样的问题,我正在使用IE9,而是使用 document.documentElement.scrollTop我编辑我的JS代码的后续行

$.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

这是因为document.documentElement.scrollTop返回0,对我来说上面的代码解决了我的问题

Answer 2

我想我已经设法解决了我的问题但同时我想我可能在jquery ui datepicker代码中发现了一个错误(？).

在我走得更远之前,让我只说我是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？

谢谢