方法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. 突如其来的&amp;quot;中断异常&amp;quot;,我(Java)该如何处理?

    # **一.何为异常?** ## 1.生活中的实例 生活中存在许多不正常: 上班路上自行车掉链子 上厕所手机掉马桶 下班回家钥匙丢失 ....... 2.程序中的实例 我们的代码中也许存在许多纰漏,导 ...

  2. Ubuntu 安装 samba 服务器

    下载 samba 工具 sudo apt install samba samba-common 配置 sudo vim /etc/samba/smb.conf // 复制到san.conf最下面 [u ...

  3. HelloWorld程序的代码编写-Hello World的编译运行

    HelloWorld程序的代码编写 程序开发步骤说明 开发环境已经搭建完毕,可以开发我们第一个Java程序了. Java程序开发三步骤:编写.编译.运行. 编写Java源程序 1. 在 d:\day0 ...

  4. dapr入门与本地托管模式尝试

    1 简介 Dapr是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr支持的语言 ...

  5. 芯片下载相关-CH32系列芯片下载方式汇总及教程

    一.CH32Fx系列芯片下载 1.ISP下载: 2.SWD下载 3.脱机烧录器下载: 二.CH32Vx系列芯片下载 1.ISP下载: 2.SWD下载: 3.脱机烧录器下载: 4.CH32V003下载注 ...

  6. 编程哲学之 C# 篇:006——什么是 .NET

    本章将用本系列第二章中提到的 类比 思维来让读者快速了解什么是.NET. 当年在网上看到一个初学者问<Java编程思想>第一章看不懂怎么办.然后我发现在很多经典的技术书中,如<C#入 ...

  7. 打开MASA Blazor的正确姿势2:组件总览

    官网文档按拼音罗列组件,且部分嵌套组件没有在导航栏内列出,不利于浏览查阅.本篇文章的主要目的,主要是对所有组件按大家习惯的方式进行分类,简要介绍组件,并建立跳转官方文档的链接.   一.导航布局类 1 ...

  8. DownKyi安装使用教程

    哔哩下载姬 哔哩下载姬是一个简单易用的哔哩哔哩视频下载工具,具有简洁的界面,流畅的操作逻辑. 支持批量下载哔哩哔哩视频 支持批量下载bilibili视频. 哔哩下载姬可以下载几乎所有的B站视频,并输出 ...

  9. 时间轮TimeWheel工作原理解析

    时间轮工作原理解析 一.时间轮介绍 1.时间轮的简单介绍 时间轮(TimeWheel)作为一种高效率的计时器实现方案,在1987年发表的论文Hashed and Hierarchical Timing ...

  10. [java安全基础 02]反射

    java反射 这一篇和上一篇对不上,这里是补一下java反射知识点 一个需求引出反射 请根据配置文件re.properties指定信息,创建Cat对象并调用方法hi classfullpath=com ...