Intersection Observer 不适用于 jQuery UI 对话框答案

【问题标题】：Intersection Observer don't work with jQuery UI dialogIntersection Observer 不适用于 jQuery UI 对话框
【发布时间】：2019-05-07 11:30:06
【问题描述】：

这与Intersection observer does not work with target with position: fixed有关

但我的问题是交互观察者不会触发具有位置的元素：绝对。我有 jQuery UI 对话框，当它出现时观察者不会触发。

这是我的代码：

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 UI

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 jquery-ui-dialog intersection-observer

【解决方案1】：

发现问题是位置：绝对，不知道为什么但是设置：

body {
    position: relative;
}

解决了这个问题，也许绝对需要参考。同样根据MDN，您可以使用 null 作为根。这也有效。

【讨论】：