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

jQuery ui datepicker positioning problem when scrolling down webpage

提问by Alex P

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.

我有一个使用 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 -->
<% } %> 

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?

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

I am using:

我在用：

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

• IE7
• ASP.NET MVC
• jquery.ui.datepicker.js (UI/API/1.8/Datepicker)

采纳答案by Alex P

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 ui datepicker 代码中发现了一个错误 (?)。

Before I go further then let me just say that I am new to jquery / javascript and would appreciate any input on the below.

在我进一步讨论之前，让我说我是 jquery / javascript 的新手，并希望在下面提供任何输入。

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.

回顾一下这个问题，我正在使用 asp.net mvc 并且我试图在页面上显示约 80 个日期选择器。对于初始视口中的任何日期选择器，日期选择器的位置很好。但是，当我向下滚动时，日期选择器仍然呈现在屏幕顶部附近。

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
       }

In the final line the offsetHeight method does not take account of how much you have scrolled down the screen by.

在最后一行中， offsetHeight 方法不考虑您向下滚动屏幕的程度。

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 

This simply gets the scrollbar position and adds it to offsetHeight to get the correct position.

这只是获取滚动条位置并将其添加到 offsetHeight 以获得正确的位置。

In the interests of full disclosure I am not exactly sure why this works and would appreciate some insight.

为了充分披露，我不确定为什么会这样，希望得到一些见解。

I have spent ~ 3 days on this issue and researched the web and this is the best I can come up with.

我在这个问题上花了大约 3 天的时间并研究了网络，这是我能想到的最好的方法。

Interestingly, there was a similar query in the jquery forums:

有趣的是，jquery 论坛里也有类似的查询：

Click here to view

点击这里查看

Reading the report it seemed to suggest that the bug was fixed in a prior version to 1.8?

阅读报告似乎表明该错误已在 1.8 的先前版本中修复？

Thanks

谢谢

回答by Christian Suarez

I had the same problem too, I'm using IE9 but instead to use document.documentElement.scrollTopI edit the follwing line on my JS code

我也有同样的问题，我使用的是 IE9，但要使用 document.documentElement.scrollTop我编辑 JS 代码上的以下行

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

This is because document.documentElement.scrollTopreturns 0, for me the above code solves my problem

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

回答by nanoscopic

I encountered this same problem with jQuery UI version 1.9.2 and IE9.

我在 jQuery UI 版本 1.9.2 和 IE9 中遇到了同样的问题。

There appears to be a function in jQuery UI entitled _checkOffsetthat is meant to take care of this problem. It doesn't work.

jQuery UI 中似乎有一个函数_checkOffset旨在解决这个问题。它不起作用。

It attempts to use $(document).scrollTop(), which always seems to return 0 in IE9. I had to alter the contents of the function to use document.body.scrollTopinstead when the jQuery function returns zero. Thus replace

它尝试使用$(document).scrollTop()，它似乎总是在 IE9 中返回 0。document.body.scrollTop当 jQuery 函数返回零时，我不得不更改要使用的函数内容。因此替换

$(document).scrollTop()

with

和

($(document).scrollTop()||document.body.scrollTop)

everywhere in _checkOffsetin order to 'fix' jQuery UI and make it work properly.

到处都是_checkOffset为了“修复”jQuery UI 并使其正常工作。

回答by humbolight

I was having these issues as well in IE 9 and cannot thank you enough for your collective help. Chrome 22.0.1229.94 m and FF 15.0.1 did not exhibit this issue for me.

我在 IE 9 中也遇到了这些问题，非常感谢您的集体帮助。Chrome 22.0.1229.94 m 和 FF 15.0.1 对我来说没有出现这个问题。

I first tried forcing IE 8 emulation with a meta tag

我首先尝试使用元标记强制 IE 8 模拟

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 

to no avail.

无济于事。

I then edited the jquery.ui.datepicker.jsfile as suggested to adjust position height by accounting for scrolling. This did not work either.

然后我按照建议编辑了jquery.ui.datepicker.js文件，以通过考虑滚动来调整位置高度。这也不起作用。

Finally I changed my doctype from

最后我改变了我的文档类型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

to

到

<!DOCTYPE html>

<!DOCTYPE html>

which worked successfully!!

成功了！

I removed the meta tag that forced IE 8 emulation, but kept the changes I made to the datepicker js file. My success could be a combination of the edited js and the change in doctype, or just the change in doctype.

我删除了强制 IE 8 模拟的元标记，但保留了我对 datepicker js 文件所做的更改。我的成功可能是编辑过的 js 和 doctype 的变化的结合，或者只是 doctype 的变化。

回答by David Moore

Within Jquery.UI, just update the _checkOffset function, so that viewHeight is added to offset.top, before offset is returned.
Script:datepicker.js

在 Jquery.UI 中，只需更新 _checkOffset 函数，以便在返回偏移量之前将 viewHeight 添加到 offset.top。
脚本：datepicker.js

_checkOffset: function(inst, offset, isFixed) {
     var dpWidth = inst.dpDiv.outerWidth();
     var dpHeight = inst.dpDiv.outerHeight();
     var inputWidth = inst.input ? inst.input.outerWidth() : 0;
     var inputHeight = inst.input ? inst.input.outerHeight() : 0;
     var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
     var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));

     offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
     offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
     offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;

     // now check if datepicker is showing outside window viewport - move to a better place if so.
     offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
                Math.abs(offset.left + dpWidth - viewWidth) : 0);
     offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
                Math.abs(dpHeight + inputHeight) : 0);
     offset.top = offset.top + viewHeight;

     return offset;
},

回答by Abhishek

Hey here is one hack which can we be used to solve this issue.

嘿，这是我们可以用来解决这个问题的一个技巧。

$(".ui-datepicker-trigger").on("click", function() {
var self;
if ($.browser.msie) {
self = $(this);
$("#ui-datepicker-div").hide();
setTimeout(function(){
$("#ui-datepicker-div").css({
top: self.offset().top + $('html').scrollTop() + 30
});
$("#ui-datepicker-div").show();
}, 0); 
}
}); 

Give a try it worked for me :)

试一试它对我有用:)

回答by Jeffrey Cobb

I have come across the same issue on an app I am working on and found a solution. The application did not contain a proper doc-type specification and all that was needed was to add it to the top of the page.

我在我正在开发的应用程序上遇到了同样的问题并找到了解决方案。该应用程序不包含适当的文档类型规范，所需要做的就是将其添加到页面顶部。

<!DOCTYPE html>

Hope this helps.

希望这可以帮助。

回答by Quasipickle

I'm not sure if this would be the problem, but you're attaching the datepicker in a non-standard way. You don't need to iterate with .each();

我不确定这是否会成为问题，但是您以非标准方式附加日期选择器。你不需要迭代 .each();

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

Also, you should always put a tag name in front of a class selector whenever possible, as it speeds up the selection process.

此外，您应该始终在类选择器前面放置一个标签名称，因为它可以加快选择过程。

回答by sanjay

first go to here and format your js file in Javascript Beautifier

首先转到这里并在Javascript Beautifier 中格式化您的 js 文件

then go to line no 445

然后转到第 445 行

k = k + document.body.scrollTop;
change this line as 
k = k ;

回答by andora

The Datepicker-UI popup can be made draggable by adding the following code:

可以通过添加以下代码使 Datepicker-UI 弹出窗口可拖动：

$('#ui-datepicker-div').draggable();

$('#ui-datepicker-div').draggable();

As this ID applies to the component div created for all popup datepickers on the page. While:

由于此 ID 适用于为页面上的所有弹出式日期选择器创建的组件 div。尽管：

$(".ui-datepicker").draggable()

$(".ui-datepicker").draggable()

Applies to all datepickers on a page (whether popup or inline). By making the panel draggable, you can usually position the datepicker where you want it without scrolling.

适用于页面上的所有日期选择器（无论是弹出式还是内联式）。通过使面板可拖动，您通常可以将日期选择器放置在您想要的位置而无需滚动。