Intersection Observer 不适用于 jQuery UI 对话框
Intersection Observer don't work with jQuery UI dialog
这与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"/>
没有jQueryUI
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"/>
有谁知道问题出在哪里以及为什么它没有触发?
发现问题是position: absolute, 不知道为什么但是设置:
body {
position: relative;
}
修复了这个问题,也许绝对需要参考。同样根据 MDN,您可以使用 null 作为 root。这也行。
这与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"/>
没有jQueryUI
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"/>
有谁知道问题出在哪里以及为什么它没有触发?
发现问题是position: absolute, 不知道为什么但是设置:
body {
position: relative;
}
修复了这个问题,也许绝对需要参考。同样根据 MDN,您可以使用 null 作为 root。这也行。