方法1:判断可见高度+滚动高度是否等于内容高度

但经过测试UC、QQ、华为浏览器,这个方法不生效。(打印查因:可能由于屏幕缩放,可见高度和滚动高度会偏小。

    $(this).scroll(function () {
var viewHeight = document.body.clientHeight; //可见高度
var contentHeight = $(".container").get(0).scrollHeight //内容高度
var scrollHeight = $(this).scrollTop(); //滚动高度
if (viewHeight + scrollHeight >= contentHeight) {
alert("到达底部了");
}
})

方法2:在页面底部放一个小div,然后判断这个div是否可见。

    var isElementInViewport = function() {
var doc = document.documentElement
return function isElementInViewport(el) {
// 获取元素是否在可视区域
var rect = el.getBoundingClientRect();
console.log('dom rect', rect)
return (
rect.top >= 0 && rect.left >= 0 &&
rect.bottom <= (window.innerHeight || doc.clientHeight) &&
rect.right <= (window.innerWidth || doc.clientWidth)
);
}
}($('.bottom_div')[0])

[jQuery]判断页面是否滚动到底部的更多相关文章

  1. vue 判断页面是否滚动到底部

    需求 要求用户阅读完本页所有内容后,下一步按钮才可以点击. 实现思路 通过判断当前页面是否到达底部来设置按钮的点击事件. 要判断当前页面是否到达底部需要用到三个距离--距离顶部的距离scrollTop ...

  2. jQuery 判断页面上下滚动

    var t = 0, b = 0; $(window).scroll(function(){ t = $(this).scrollTop(); if(b < t){ console.log('向 ...

  3. jQuery判断页面滚动条滚动方向

    废话不多说,直接上代码 $(window).scroll(function(){ var before = $(window).scrollTop(); $(window).scroll(functi ...

  4. jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery判断页面滚动条(scroll)是上滚还是下滚

    单纯判断滚动条方向 function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function ...

  6. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  7. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...

  8. js 判断浏览器是否滚动到底部

    //jquery 实现代码 $(document).height() == $(window).height() + $(window).scrollTop() 1 整个空间的高度 包含(滚动条距离顶 ...

  9. jQuery 判断页面元素是否存在的代码

    在原生的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  10. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

随机推荐

  1. 光速上手k8s(2023)(containerd)(未完待续)

    又过了好久没写了,主要是近来状况也无聊 一.了解概念(参考) 概念 Kubernetes 是一个可移植.可扩展的开源平台,用于管理容器化的工作负载和服务,可促进声明式配置和自动化. Kubernete ...

  2. Java学习记录:2022年1月13日(其二)

    Java学习记录:2022年1月13日(其二) ​ 摘要:本篇笔记主要记录了在设计类时的一些注意事项,类加载时类中各个部分的加载顺序以及继承和多态的知识. 目录 Java学习记录:2022年1月13日 ...

  3. dp 优化

    dp 优化 \(\text{By DaiRuiChen007}\) I. [ARC085D] - NRE \(\text{Link}\) 思路分析 将最终的第 \(i\) 对 \(a_i\) 和 \( ...

  4. 算法之Dijkstra及其堆优化和SPFA:图上单源最短路径神器

    签到题-- 题目传送门 SPFA算法 本人曾经写过一篇有关Bellman-ford的博,但就算是挂了优化的ford也只能过这道题的弱化版. 今天就先填个坑,先讲SPFA. 在这里我直接认为你们已经有一 ...

  5. Caddy-用Go写的新一代可扩展WebServer

    前几天用 Netmaker 的时候发现它用 Caddy 替换掉了 Nginx,用了后发现确实简单好用,就安利一下. Caddy 是一个强大的.可扩展的平台,用 Go 编写,可以为你的站点.服务和应用程 ...

  6. post方法易错地方

    <body> <h1>登录</h1> <input type="text" placeholder="请输入用户名" ...

  7. axios 使用方法 以及服务器端 设置拦截发送404状态的提示语,当网络错误时候返回前端的提示, 当网络正常的时候返回后端的提示

    本文旨在说明  设置全局异常拦截器 当网络错误时候返回前端的提示, 当网络正常的时候返回后端的提示 export default ({ development: { baseURL: 'http:// ...

  8. 如何解决github下载很慢的问题?(已经解决)

    目的是为了解决GitHub致命的下载速度慢的问题 方法 通过码云来导入github,通过码云下载 1.在github上面找到自己想要的项目 这一步略过 2.复制github项目上面的网页链接 3.打开 ...

  9. .Net Core对于`RabbitMQ`封装分布式事件总线

    首先我们需要了解到分布式事件总线是什么: 分布式事件总线是一种在分布式系统中提供事件通知.订阅和发布机制的技术.它允许多个组件或微服务之间的协作和通信,而无需直接耦合或了解彼此的实现细节.通过事件总线 ...

  10. javaEE(网络编程、TCP、线程池优化)

    网络编程 Client-Server(CS) Browser/Server(BS) 1.客户端--服务端 安装客户端 更新. 依赖PC 2.浏览器和服务端 分布式 兼容性 一站开发 网络通信: UDP ...