Question

我正在尝试将元素放在其他元素的正下方，但我遇到了一个问题，当页面向下滚动时，offset（）会返回IE和其他浏览器的不同值。

IE返回相对于可见区域顶部的位置（即向下滚动时下降），Firefox和Chrome始终返回相同的值，无论滚动（我认为这是一个更好的行为）。

只是为了澄清：困扰我的是，如果没有父元素相对定位，则offset（）和position（）会返回IE的不同值，具体取决于您向下滚动的距离，但这绝不是在jQuery文档中提到。为什么会这样？有没有办法绕过它，不需要更改html结构（例如，我想为许多字段重用一个日期选择器，只需稍微重新定位）。

有没有人遇到同样的问题？

Answer 1

查看我的fiddle，通过拖动红色div进行测试。

HTML

<div id="hook"></div>
<div id="hanger"></div>

CSS

#hook {
    width: 200px;
    height: 50px;
    background-color:red;
    position: absolute;
    cursor: move;
}
#hanger {
    width: 200px;
    height: 50px;
    background-color:purple;
    position: absolute;
}

的Javascript

$('document').ready(function(){
    var top = $('#hook').offset().top + $('#hook').height()+20;
    var left = $('#hook').offset().left;

    $('#hanger').css('top', top);
    $('#hanger').css('left', left);

    $('#hook').draggable({
        start: function(){
            $('#hanger').toggle();
        },
        stop: function(){
                var top = $('#hook').offset().top + $('#hook').height()+20;
                var left = $('#hook').offset().left;

                $('#hanger').css('top', top);
                $('#hanger').css('left', left);

                $('#hanger').toggle();
        }
        });
});

Answer 2

详细说明griegs回答你可以将它附加到包含DOM元素的相同内容然后使用.position()而不是.offset()，因为它将基于父级而不是文档引用位置。可能会给你更好的结果。

http://api.jquery.com/position/

修改

格里格删掉了他的回答，这就是他所说的：

不，但我使用追加来追加其他项目之后的项目。因此，如果你的元素在div中，你会追加应该使它们成为Div的新元素出现在底部

Answer 3

这应该有用，虽然它可能要求elem的父元素相对定位......

var elem = $("#elementToShowCalenderUnder");
var pos = elem.position();
$("#yourCalender").css({
  position: "absolute",
  left: pos.left() + "px";
  top: pos.top() + elem.height() + 5 + "px";
}).insertAfter(elem);

Answer 4

IE8没有pageX或pageY属性，它们为您提供相对于页面而不是浏览器窗口的事件位置，要解决此问题，您可以计算您的位置我检查滚动位置，如下所示代码示例：

...
var view = this;
var currEl = evt.currentTarget.graphic.element; //evt.toElement;
//Determine the coordinates to offset the positioning of the context menu by
var posx = 0;
var posy = 0;
if (evt.pageX || evt.pageY) {
    posx = evt.pageX;
    posy = evt.pageY;
} else if (evt.clientX || evt.clientY) { //IE8 & 9 don't have pageX or pageY
    posx = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var atPos = (posx - $(currEl).offset().left) + " " + (posy - $(currEl).offset().top);
...

Answer 5

您可以使用：

代替.offset()

$("#div_id").get(0).getBoundingClientRect().top + scroll_value

scroll_value以上是$("#enclosing_div_with_scrollbar_id").scrollTop()值其中enclosing)_div_with_scrollbar_id是div的id，它包含初始div_id并且有一个滚动条。

如果封闭div是body或html，则使用：

scroll_value= ($("body").scrollTop() || $("html").scrollTop())

（两个值，因为Chrome和Firefox对.scrollTop()功能的反应不同）

Answer 6

var el = $("myElement");
var position = el.position();
//PREVENT SCROLLING.
 var parentScroll =  el.offsetParent();
 position.top += parentScroll.scrollTop();
 position.left +=parentScroll.scrollLeft();

jQuery offset（）。top是浏览器不兼容的？

6 个答案:

修改