温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - How can I detect window scroll ended in javascript?

html - 如何检测以JavaScript结尾的窗口滚动?

发布于 2020-03-27 15:54:20

我想在滚动结束后向所选元素添加一个类。如何检测以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'
});

JSBIN示例

查看更多

查看更多

提问者
midstack
被浏览
14
Fabrizio Calderan 2020-01-31 17:20

您可以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'  
});

小提琴的例子