当某些浏览器无法使用此方法时，是否可以将内置的javascript方法存储在变量中以设置不同的行为？
我的特定情况是在Safari或旧版MS浏览器中不可用的intersectionObserver。我有一些由此触发的动画，如果不可用intersectionObserver，请关闭它们。
我想要做的基本上是这样的：
var iO = intersectionObserver;
if ( !iO ) {
// set other defaults
}
我真的不想只为一个功能加载polyfill或库吗？
非常感谢
艾米莉
可new IntersectionObserver()用于检测用户是否位于页面顶部 (scrollY = 0) VS. 当scrollY > 0（用户已向下滚动）时？
因为我尝试了这个但无法让它工作：
var myObs = new IntersectionObserver(function (entry) {
if ( entry.intersectionRatio > 0 ) {
console.log('> 0');
} else {
console.log('< 0');
}
}, { threshold: [0], rootMargin: '0px 0px', });
myObs.observe( document.body );
仅当用户快速滚动条形图或强制滚动条停留在按钮上时，Intersection Observer 才会出现问题。
不幸的是，新数据到达了，但由于用户按住滚动条，ref 对象保留在视图上。
如果用户快速滚动或按住滚动条，则会发生此问题。虽然接收到新数据需要下推加载框，但用户手动保持。所以观察者不会检测到变化。
用户需要再次上下滚动才能再次加载。
无论如何，要向组件添加计时器，以查看 2 秒后加载框是否仍在视图中并调用端点？换句话说，我如何获得 IntersectionObserver 的当前状态。查看它当前是否可见？
我正在尝试使用新的 Intersection Observer API，但我只能触发一次它的事件。我相信我使用它是正确的，因为我几乎是逐字逐句地使用MDN 示例。
https://jsfiddle.net/bukzor/epuwztn0/106/
function startObserver() {
// Almost verbatim from MDN docs:
// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
let options = {
root: document.querySelector('#svg'),
rootMargin: '0px',
threshold: 0.50,
}
let observer = new IntersectionObserver(onIntersection, options);
let target = document.querySelector('circle');
observer.observe(target);
}
function onIntersection(entries, observer) {
// Simply log all intersectiono entries.
console.log(observer)
console.log("intersections:")
entries.forEach(function(entry) {
console.log(entry)
// This code is just a wild guess, but it still won't fire a second time.
observer.observe(entry.target)
})
}
当我运行它时，我在控制台中只有一个条目，而没有其他条目。它提到的零大小矩形，isVisible: false似乎是其他症状，但我一直无法找到原因。 …
此脚本为活动部分发出活动类。最近注意到它在小屏幕上停止工作。即使在 chrome 的开发人员控制台中，我也会开始增加屏幕尺寸并且它会出现，一旦我开始缩小它就会立即停止工作（活动类消失）。但仅对于一个长部分，在较短的部分中一切正常。如何解决这个问题？
在代码片段中，我设置了一个较大的固定高度，因此投资组合链接不会接收活动类，在我的示例中，当部分宽度增加时，其高度会减小，因此在某些时候一切都会开始工作。
const links = document.querySelectorAll('.nav-link');
const sections = [... document.querySelectorAll('.forJS')];
const callback = (entries) => {
links.forEach((link) => link.classList.remove('active'));
const elem = entries.find((entry) => entry.isIntersecting);
if (elem) {
const index = sections.findIndex((section) => section === elem.target);
links[index].classList.add('active');
}
}
let observer = new IntersectionObserver(callback, {
rootMargin: '0px',
threshold: 0.5
});
sections.forEach((section) => observer.observe(section));section {
height: 100vh;
scroll-y: auto;
}
.long{
height: 300vh;
}
.nav-link.active{
color: red;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<header class="fixed-top">
<nav …在下面的示例代码中，isIntersecting总是true，可能是因为相交的主题是父对象本身。
有没有办法使用 IntersectionObserver 来检测两个盒子之间的相交/碰撞？
我们的想法是使用这个内置 API，因为每当任何框位置发生更改时都需要检查交叉点；在原始代码中，它们从一个位置转换到另一个位置，并在检测到碰撞时立即做出反应。例如，这将是轮询的一个有趣的替代方案。
任何想法都会很棒。
/** @type {HTMLDivElement[]} */
const elements = Array.from(document.getElementsByClassName('box'));
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log(
`${entry.target.className} is overlapping with another element`
);
}
});
});
console.log('elements', elements);
elements.forEach((div) => observer.observe(div));#container {
width: 150px;
height: 150px;
position: relative;
background-color: aqua;
}
.box {
width: 32px;
height: 32px;
border: 1px solid #333;
background-color: yellow;
position: absolute;
}<div id="container">
<div class="box" style="left: 8px; …我制作了几个垂直滚动 IntersectionObserver 模块，但我对水平滚动感兴趣（根将是 div，观察目标将是 img）。我想观察当 img 放大但 div 保持视口宽度时的变化。我什至不确定移动 Safari 是否会将缩放后的图片报告为宽度发生变化，这是一个实验。回到问题上来，我还没有找到任何信息。回复：观察水平交叉点，所以我不确定是否支持？
我有一个页面分为多个部分。现在，在滚动时，我尝试使用导航项下边框的宽度来显示进度（视图中有多少部分）。在下面您将找到我如何实现它的示例。
现在，如您所见，如果某个部分高于视口，则 intersectionRatio 将永远不会达到 1（这反过来也不会绘制全宽边框）。我可以使用任何选项或替代方案来真正实现全宽度吗？
(function() {
var sections = [],
links = {},
thresholdSet = [[]],
observerOptions = {
root: null,
rootMargin: "0px",
threshold: _buildThresholdList()
};
function _init() {
if (!'IntersectionObserver' in window) {
return;
}
sections = document.getElementsByClassName('section');
for(var i = 0; i < sections.length; i++) {
var observer = new IntersectionObserver(_intersectionCallback, observerOptions),
section = sections[i],
link = document.getElementById('js-' + section.id);
links[section.id] = {
node: link,
initialWidth: link.offsetWidth
};
observer.observe(section);
}
}
function _buildThresholdList() {
for(var i = …据我所知，一旦你设置了rootMargin:"0px"，这意味着当你选择的元素在屏幕上完全可见并且相对于视口或任何相关元素有 0px 的边距时，就会产生效果。
在Threshold 属性中，它的值从 0% 到 100% 也表示为 0 到 1。这意味着如果该值为 1，则一旦元素在视口上 100% 可见，回调就会运行。
请强调它们之间的差异。
页面加载后，我\xe2\x80\x99d 喜欢使用 Intersection Observer API 来观察元素 (addonCard)，以了解该元素是否完全可见。如果该元素不可见或部分可见，我希望该元素滚动到完全可见。如果 it\xe2\x80\x99s 已经完全可见，我希望该元素停止被观察。根据我的理解，您可以通过将阈值属性设置为 1 来检查完全可见性。但是，下面的我的实现不起作用（无论元素是否完全可见，它都会滚动）：
\nlet addonCard = this.querySelector(`[addon-id="${param}"]`);\nlet observer = new IntersectionObserver(\n (entries, observer) => {\n entries.forEach(entry => {\n if (entry.intersectionRatio != 1) {\n let stickyHeaderHeight = document.querySelector(\n "#page-header > .sticky-container"\n ).offsetHeight;\n let topOfTarget = entry.target.offsetTop - stickyHeaderHeight;\n window.scrollTo({\n top: topOfTarget,\n behavior: "smooth"\n });\n } else {\n observer.unobserve(entry.target);\n }\n });\n }, {\n threshold: 1,\n }\n);\nobserver.observe(addonCard);\n有人可以解释为什么这个实现不起作用以及我如何让它起作用吗？为什么entry.intersectionRatio从0开始永远不会改变？
预期行为：如果不完全可见，addonCard 应滚动到完全可见。如果它已经完全可见，则不应进行滚动。
\n实际行为：无论 addonCard 是否完全可见，都会发生滚动。
\n