那么,当触发事件时,如何知道滚动的方向呢?
在返回的对象中,我看到最接近的可能性是与 boundingClientRect
交互,保存最后的滚动位置,但我不知道处理 boundingClientRect
是否会导致性能问题。
是否可以使用交叉事件来确定滚动方向(向上/向下)?
我添加了这个基本代码片段,如果有人能帮忙。
我将非常感激。
这是代码片段:
var options = {
rootMargin: '0px',
threshold: 1.0
}
function callback(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('entry', entry);
}
});
};
var elementToObserve = document.querySelector('#element');
var observer = new IntersectionObserver(callback, options);
observer.observe(elementToObserve);
#element {
margin: 1500px auto;
width: 150px;
height: 150px;
background: #ccc;
color: white;
font-family: sans-serif;
font-weight: 100;
font-size: 25px;
text-align: center;
line-height: 150px;
}
<div id="element">Observed</div>
我希望了解这个,这样我就可以将其应用于固定标题菜单以展示或隐藏它。