我们每天都有阅读文章的习惯，无论是在手机还是电脑上，我们所看到内容包括新闻、学习教程、以及各类杂七杂八的刊物，都可以认为是一篇文章。然而，有时候我们会遇到一个烦恼，当我们每一次关闭页面再次重新打开时，会发现文章回到了起点而无法记录到之前观看的位置，用过微信的都知道，我们在浏览订阅号文章时，会比较人性化的记录我们当前所阅读的位置，在我们不小心关闭又打开时，又定位到我们刚刚阅读的位置，这样不仅节约了重新滑动的时间，也避免了短暂性空白。
于是，便萌生了使用 TamperMonkey 脚本程序 运行 js 程序 来记录我们当前网页的浏览位置。
为了获取浏览的位置，我们需要为 scroll 事件添加监听事件
ddEventListener()与 removeEventListener()用于处理指定和删除事件处理程序操作。
它们都接受 3 个参数：如 addEventListener(“事件名” , “事件处理函数” , “布尔值”); (注：事件名不含”on”,如“click”)
然后在事件函数中获取 scrollTop 值以及储存 scrollTop 便于下次定位（此处储存在 sessionStorage）
由于存在兼容性问题，在拿到 scrollTop 的值的时候需要考虑各种情况。网上也有各种解决方案
各浏览器下 scrollTop 的差异
IE6/7/8：
对于没有 doctype 声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop 高度
对于有 doctype 声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
比较特别，有自己获取 scrollTop 的函数 ： window.pageYOffset ；
Firefox:
document.documentElement.scrollTop
然而，我们会遇到一个问题,这里用控制台测试可以看到，当我们鼠标轻轻滑动时，事件函数触发多次，消耗了多余的内存。
那么如何解决这个问题呢？这个时候我们需要了解一下防抖和节流了。
防抖（debounce）
概念：当连续触发事件时，在一定时间内不触发事件时，事件处理函数才会触发。如果在一定时间内再次触发事件时，则会重新开始延时。
函数代码：
节流（throttle）
概念：类似于技能冷却，当我们释放技能后，在一定时间内不可再次触发，然后等过了这个时间后再次重新激活。
函数代码：
了解和掌握了防抖的概念和用法之后，通过使用上述函数进行优化，我们可以发现函数调用的次数减少。
最后，附上我糙糙的代码
评论（0）