时间戳

首页 > 解决方案 > 如何检测以 javascript 结束的窗口滚动？

javascript - 如何检测以 javascript 结束的窗口滚动？

问题描述

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

标签： javascripthtmlscroll

解决方案

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

示例小提琴

推荐阅读