Intersection Observer не работает с диалоговым окном jQuery UI

Это связано с Обозреватель пересечения не работает с целью с положение: фиксированное

но моя проблема в том, что наблюдатель пересечения не срабатывает на элементе с position: absolute. У меня есть диалог пользовательского интерфейса jQuery, и когда он появляется, наблюдатель не срабатывает.

Вот мой код:

var self = $('<div/>').appendTo('body').dialog({
    autoOpen: false
})
var first = true;
function visibility_checker(x) {
    if (first) {
        first = false; // ignore initial call
    } else {
        console.log(x);
    }
}
setTimeout(function() {
    self.dialog('open');
}, 4000);
if (window.IntersectionObserver) {
    var visibility_observer = new IntersectionObserver(visibility_checker, {
        root: document.body
    });
    visibility_observer.observe(self[0]);
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

Без пользовательского интерфейса jQuery

var self = $('<div class="x"/>').hide().appendTo('body');
var first = true;
function visibility_checker(x) {
    if (first) {
        first = false; // ignore initial call
    } else {
        console.log(x);
    }
}
setTimeout(function() {
    self.show();
}, 4000);
if (window.IntersectionObserver) {
    var visibility_observer = new IntersectionObserver(visibility_checker, {
        root: document.body
    });
    visibility_observer.observe(self[0]);
}
.x {
 width: 100px;
 height: 100px;
 background: red;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

Кто знает в чем проблема и почему не горит?


javascript jquery intersection-observer jquery-ui-dialog
person jcubic    schedule 07.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нашел проблему, проблема в позиции: абсолютная, не знаю почему, но установка:

body {
    position: relative;
}

исправлена ​​​​проблема, возможно, абсолютная необходимость иметь ссылку. Также в соответствии с MDN вы можете использовать null как root. Это также работает.

person jcubic    schedule 07.05.2019