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

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

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

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

  1. var isElementInViewport = function() {
  2. var doc = document.documentElement
  3. return function isElementInViewport(el) {
  4. // 获取元素是否在可视区域
  5. var rect = el.getBoundingClientRect();
  6. console.log('dom rect', rect)
  7. return (
  8. rect.top >= 0 && rect.left >= 0 &&
  9. rect.bottom <= (window.innerHeight || doc.clientHeight) &&
  10. rect.right <= (window.innerWidth || doc.clientWidth)
  11. );
  12. }
  13. }($('.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. 【SpringBoot实战专题】「开发实战系列」从零开始教你舒服的使用RedisTemplate操作Redis数据

    SpringBoot快速操作Redis数据 在SpringBoot框架中提供了spring-boot-starter-data-redis的依赖组件进行操作Redis服务,当引入了该组件之后,只需要配 ...

  2. TCP通信的概述(上)-TCP通信的概述(下)

    TCP通信的概述(上) TCP通信的概述(下)

  3. 使用ProPerties集合存储数据-Properties集合中的方法store

    使用ProPerties集合存储数据 java.util.Properties`继承于Hashtable,来表示一个持久的属性集.它使用键值结构存储数据每个键及其对应值都是一个字符串.该类也被许多Ja ...

  4. Java 进阶P-5.1+P-5.2

    城堡游戏 一.城堡游戏介绍:1.这个程序的任务是通过玩家的输入的方向(纯文字)在虚构的城堡内移动(以纯文字作为移动后的返回结果).2.这个程序接受help.bye.go south.go north. ...

  5. Hive删除分区名称中含有特殊字符

    先说方案:通过show partitions和hdfs url看到的都不是真正的分区名称,都是经过URI重新编码的,访问这些分区应该使用分区名称的原始字符串. 场景描述 当我们在SQL语句中使用变量时 ...

  6. immutable.js学习笔记(六)----- OrderedSet

    一.OrderedSet 二.普通Set 与 OrderedSet 注意:普通Set并不是严格的一定是升序的 三.takeWhile 四.升序 sort valueA - valueB 五.降序 va ...

  7. python基本数据类型与内置方法

    1.数据类型内置方法理论 1.每一种数据类型本身都含有一系列的操作方法,内置方法是其本身自带的功能,是其中最多的. 2.python中数据类型调用的内置方法的统一句式为>>>:句点符 ...

  8. springboot框架返回日期值少一天

    1 问题 一个请求,返回一个对象,对象里面有日期,返回的对象的日期却比实际的日期少了一天 如下图:在return返回的时候查看返回的对象的日期的值 postman返回的结果如下图,几个日期都少了一天 ...

  9. sqlserver数据库批量新增修改类

    MSSql Server 数据库批量操作 需要引用的命名空间 using System; using System.Collections.Generic; using System.Data; us ...

  10. 视觉SLAM:滑动窗口

    1.SLAM问题 1.1建模 考虑某个状态 \(\xi\),以及一次与该变量相关的观测 \(r_{i}\).由于噪声存在,观测服从概率分布 \(p(r_{i}|\xi)\).多个观测时,各个测量值相互 ...