方法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. Jq /Js 拖动选择文件

    必须先引入 Jquery 依赖 1.文件结构 2. HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. 迁移学习(MixMatch)《MixMatch: A Holistic Approach to Semi-Supervised Learning》

    论文信息 论文标题:MixMatch: A Holistic Approach to Semi-Supervised Learning论文作者:David Berthelot, Nicholas Ca ...

  3. Java用户交互方法——Scanner

    Scanner用户交互 使用Next方法接收 Scanner scanner = new Scanner(System.in); if(scanner.hasNext()){//判断用户有无输入 St ...

  4. Potree 003 基于Potree Desktop创建自定义工程

    1.第三方js库 第三方库js库选择dojo,其官网地址为https://dojotoolkit.org/,git地址为https://github.com/dojo/dojo,demo地址为http ...

  5. 自定义alert弹框,去掉IP以及端口号提示

    最新版例子~~  如果同时多个弹框,只显示第一个 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. NAPT网络结构下TCP/UDP/ICMP访问外网原理思考

    背景 作为程序员,应该都听说过NAT(Network Address Transfer,网络地址转换)这一技术名词,并或多或少大概知道其原理与作用--NAT是用于解决IPv4地址不够用,保证我们能够在 ...

  7. 【学习笔记】XR872 GUI Littlevgl 8.0 移植(文件系统)

    不得不提 在移植的过程中,发现 LVGL 的文件操作接口并不十分完善,在我看来, LVGL 的文件操作接口,应该更多的是为了 LVGL 内部接口方便读取资源文件而设立的,例如读取图像文件,加载字库文件 ...

  8. JSP第九次作业

    1.建库,建表2个用户表(id,用户名,密码)邮件表(id,发件人,收件人,标题,内容,发送时间,状态) 2.建model层entity,dao包 3.登陆,注册,登陆后显示全部邮件 dao 1 pa ...

  9. ElasticSearch使用教程

    一.ElasticSearch使用说明 1. 索引 index,相当于数据库表Table 1.1 查看所有索引 GET _cat/indices?v 1.2 创建索引字段映射关系 PUT /test ...

  10. kali挂代理之——proxychains4

    记一次打站需要用到kali,但是得挂代理,就从别人那里知道了一个kali挂代理的工具proxychains4. 首先是打开kali输入:root@Kali:~# vi /etc/proxychains ...