JQuery offset(). top не совместим с браузером?

Я пытаюсь расположить элемент прямо под каким-либо другим элементом, но я столкнулся с проблемой, где offset() возвращает разные значения для IE и других браузеров, когда страница прокручивается вниз.

IE возвращает позицию относительно верхней части видимой области (т.е. отклоняется при прокрутке вниз), а Firefox и Chrome всегда возвращают одно и то же значение независимо от прокрутки (что, как я полагаю, намного лучше).

Просто для того, чтобы уточнить: что меня беспокоит, если ни один из элементов, которые родители не расположены относительно друг друга, то offset() и position() возвращают разные значения для IE, в зависимости от того, насколько далеко вы прокрутили вниз, но это никогда упомянутых в документах jQuery. Почему это так? Есть ли способ обойти это, что не требует каких-либо изменений структуры html (например, я хочу повторно использовать один datepicker для многих полей, просто слегка переставив его).

Кто-нибудь сталкивается с той же проблемой?

Ответ 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();
        }
        });
});

Ответ 2

Разрабатывая ответ griegs, вы можете добавить его к тому же, что и элемент DOM, а затем использовать .position() вместо .offset(), поскольку он будет ссылаться на позицию, основанную на родительском, а не на документе. Можете дать вам лучшие результаты.

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

Изменить

grieg удалил свой ответ, вот что он сказал:

Нет, но я использую Append для добавления элементов после других элементов. Итак, если ваши элементы говорят о div, вы добавили бы новые элементы в Div, которые должны сделать их появляются внизу

Ответ 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);

Ответ 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);
...

Ответ 5

Вместо .offset() вы можете использовать:

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

scroll_value выше значение $("#enclosing_div_with_scrollbar_id").scrollTop() где enclosing)_div_with_scrollbar_id - id div, который включает начальный div_id и имеет полосу прокрутки.

Если вложение div является телом или html, используйте:

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

(два значения, поскольку Chrome и Firefox по-разному реагируют на функцию .scrollTop())

Ответ 6

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