【Web前端】浏览器拖动到底部执行相关代码

利用 jQuery 实现

滑动到最底部实现相关功能，例如加载。

//获取某个 div 距离浏览器顶部的距离var $top = $this.offset().top;//获取到整个文档的高度var $heightOfDocument = $(document).height();//获取当前浏览器可视高度var $heightOfWindow = $(window).height();if ($heightOfDocument - $heightOfWindow === $top) {    //执行代码} else {    return false;}

滑到到距离底部一段距离就开始加载相关代码：

//获取某个 div 距离浏览器顶部的距离var $top = $this.offset().top;//获取到整个文档的高度var $heightOfDocument = $(document).height();//获取当前浏览器可视高度var $heightOfWindow = $(window).height();//这里给 $top 加上一个值，让前面两个的差小于这个值即可。if ($heightOfDocument - $heightOfWindow <= $top + 100) {     //执行代码} else {    return false;}

利用 javascript 实现

var scrollTop = getScrollTop();var clientHeight = getClientHeight();var offsetHeight = getOffsetHeight();for (var i = 0; i < items.length; i++) {    var offsetTop = items[i].offsetTop;    if (offsetHeight - clientHeight <= scrollTop + 100) {      //执行代码    } else {      break;    } }function getOffsetHeight() {        return document.documentElement.offsetHeight || document.body.offsetHeight;}function getClientHeight() {    return document.documentElement.clientHeight || document.body.clientHeight;}