浏览器触底判断(添加防抖)

简介: 浏览器触底判断(添加防抖)

废话不多说,直接上代码!
function moveToBrowserBottom() {
let timerForDebounce = null; //为了防抖添加的timer
window.onscroll = function() {

if (timerForDebounce) clearTimeout(timerForDebounce);
var scrollTop =
  document.documentElement.scrollTop ||
  window.pageYOffset ||
  document.body.scrollTop;
    // gap是为了计算偏差,有时候会有1px的偏差值
let gap =
  Math.ceil(document.documentElement.clientHeight + scrollTop) -
  document.documentElement.scrollHeight;  
if (
  document.documentElement.scrollHeight ===
    Math.ceil(document.documentElement.clientHeight + scrollTop) ||
  gap === 1
) {
  timerForDebounce = setTimeout(() => {
    console.log("触底了");
  }, 200);
}

};
}

复制代码
作者: Bill 本文地址: http://biaoblog.cn/info?id=1608281280000

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
JavaScript 前端开发 Go
怎样控制浏览器前进、后退、页面跳转?
怎样控制浏览器前进、后退、页面跳转?
188 0
|
5月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
5月前
|
JavaScript
js怎样控制浏览器前进、后退、页面跳转
js怎样控制浏览器前进、后退、页面跳转
73 0
|
8月前
|
JavaScript 安全 前端开发
js控制浏览器前进、后退、页面跳转
js控制浏览器前进、后退、页面跳转
80 3
|
8月前
|
Web App开发 移动开发 JavaScript
【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
|
JavaScript 前端开发 UED
什么是事件冒泡?如何阻止事件冒泡和浏览器默认事件?
什么是事件冒泡?如何阻止事件冒泡和浏览器默认事件?
204 0
|
JavaScript 前端开发 数据安全/隐私保护
Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
1193 0
|
JavaScript API
onbeforeunload事件之关闭浏览器之前的提示弹框
onbeforeunload事件之关闭浏览器之前的提示弹框
629 0
|
JavaScript 前端开发 开发者
面试官:说说哪些浏览器事件不会冒泡
你知道哪些浏览器事件不会冒泡吗?

热门文章

最新文章

下一篇
开通oss服务