滚动可以分为窗口滚动和div滚动
窗口滚动
因为要兼容不同浏览器，窗口滚动的当前高度是取这三个值
document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
div滚动
假设html代码如下:
<div class="scroll-view">
<div class="content" >
<p>...</p>
<p>...</p>
...
</div>
</div>
<style>
.scroll-view {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
这么取当前位置：
const $ = document.querySelector.bind(document)
function doSomething (currentY) {
console.log('当前位置', currentY);
}
let lastKnownScrollPosition = 0;
let ticking = false;
$('.scroll-view').addEventListener('scroll', function(e) {
lastKnownScrollPosition = e.target.scrollTop;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
});
这里的requestAnimationFrame是为了避免消耗过多的资源
requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
