我有一段代码,根据元素是从顶部还是底部滚动到视口或从视口滚动出来,向元素添加不同的CSS类。
它使用Intersection Observer,因为它应该比scroll
事件更好地处理大量元素。
但是,此代码遇到两个问题:
这很奇怪,因为IntersectionObserver在Safari上甚至在iOS上的移动浏览器上都可以正常工作。
您可以find the code on jsFiddle或在此处查看代码段:
const config = {
// Add root here so rootBounds in entry object is not null
root: document,
// Margin to when element should take action
rootMargin: '-50px 0px',
// Callback will be fired 30 times during intersection
threshold: [...Array(30).keys()].map(x => x / 29)
};
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach((entry, index) => {
const element = entry.target;
// Get root element (document) coords
const rootTop = entry.rootBounds.top;
const rootBottom = entry.rootBounds.height;
// Get div coords
const topBound = entry.boundingClientRect.top - 50; // margin in config
const bottomBound = entry.boundingClientRect.bottom;
let className;
// Do calculations to get class names
if (topBound < rootTop && bottomBound < rootTop) {
className = "outview-top";
} else if (topBound > rootBottom) {
className = "outview-bottom";
} else if (topBound < rootBottom && bottomBound > rootBottom) {
className = "inview-bottom";
} else if (topBound < rootTop && bottomBound > rootTop) {
className = "inview-top";
}
element.setAttribute('data-view', className);
});
}, config);
const viewbox = document.querySelectorAll('.viewme');
viewbox.forEach(image => {
observer.observe(image);
});
body {
text-align: center;
}
.margins {
position: fixed;
top: 50px;
bottom: 50px;
border-top: 2px dashed;
border-bottom: 2px dashed;
z-index: 1;
left: 0;
width: 100%;
pointer-events: none;
}
.hi {
padding: 40vh 0;
background: lightgray;
}
.box {
width: 23%;
min-width: 100px;
height: 40vh;
margin-bottom: 10px;
background: lightblue;
display: inline-block;
}
.viewme {
transition: all .3s ease;
}
.viewme[data-view='inview-top'],
.viewme[data-view='inview-bottom'] {
opacity: 1;
transform: translateY(0);
}
.viewme[data-view='outview-top'] {
opacity: 0;
transform: translateY(-20px);
}
.viewme[data-view='outview-bottom'] {
opacity: 0;
transform: translateY(20px);
}
<p class="hi">Scroll down and back up</p>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class="box viewme"></div>
<div class='margins'>
</div>
到目前为止,关于可能导致这些问题的原因,我有两个提示:
Type error
root: document
的脚本在iOS上不起作用。相反,它们在定义root: null
时起作用。但是,由于root: null
,我无法使用rootBounds
。我试图将我的html包装在div中,并将div的id设置为根元素,但这不起作用(see here)。非常感谢您提供的解决这两个问题的帮助。但是,请考虑一下我没有编写上面的代码,并且不太了解。
尽管我无法完全理解该错误的原因,但确实有解决方案: