我想在滚动结束后向所选元素添加一个类。如何检测以JS结尾的滚动?
的HTML
<ul class="list" id="wrapper">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li id="element">7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
JS
const element = document.getElementById('element');
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
您可以requestAnimationFrame
用来检测何时scrollTop
大于y
requestAnimationFrame
就性能而言,它比在滚动上同时设置间隔和事件侦听器要好得多。
const element = document.getElementById('element');
const y = element.getBoundingClientRect().top + window.scrollY;
function checkScrollEnd() {
if ((window.scrollY || document.body.scrollTop || document.documentElement.scrollTop) < y) {
window.requestAnimationFrame(checkScrollEnd);
}
else {
alert('end of scroll')
}
}
window.requestAnimationFrame(checkScrollEnd);
window.scroll({
top: y,
behavior: 'smooth'
});
如果滚动被其他滚动放弃,或者没有产生任何效果(例如,scrollTo(currentPosition)),则将启动无限rAF循环
并在单个方向上工作
@Kaiido它只是OP所要求的,它没有考虑任何上下文
它不会“检测滚动何时结束”,不会,“检测滚动顶部何时大于目标位置”,这对滚动动作一无所知,并且在我之前的评论中提到的情况下,OP永远不会失败说可以忽略。