解决问题思路

滚动条距离上面的滚动高度(scrollTop) + 滚动条本身高度 = 整个页面的高度(pageHeight)

关键点:滚动条本身高度是多少

事实上,这里就有一个思想误区,人会想直接获取滚动条高度(但找不到这个API,同时滚动条表现出来的高度,也会虽内容变长变短)。

其实你只要考虑一下,为什么会出现滚动条。出现滚动条代表超出可视窗口,它的滚动距离就是超出部分,而可视窗口高度就是滚动条对应的真实高度。

  1. //滚动条距离顶部高度
  2. function getScrollTop() {
  3. var scrollTop=0;
  4. if(document.documentElement&&document.documentElement.scrollTop) {
  5. scrollTop=document.documentElement.scrollTop;
  6. }
  7. else if(document.body) {
  8. scrollTop= document.body.scrollTop;
  9. }
  10. return Math.ceil(scrollTop);
  11. }
  12.  
  13. //滚动条本身高度:就是可视窗口高度
  14. function getScrollBarHeight(){
  15. let scrollBarHeight = document.documentElement.clientHeight;
  16. return Math.ceil(scrollBarHeight);
  17. }
  18.  
  19. //整个页面高度
  20. function getPageHeight() {
  21. return Math.ceil(Math.max(document.body.clientHeight,document.documentElement.scrollHeight));
  22. }
  23.  
  24. window.onscroll = function () {
  25. let top = getScrollTop();
  26. let ch = getScrollBarHeight();
  27. let sh = getPageHeight();
  28. if (top + ch >= sh) {
  29. console.log("到达底部");
  30. }else{
  31. console.log("没有到达底部");
  32. }
  33. }

js 判断滚动条 是否滚动到底部的更多相关文章

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

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

  2. js 判断滚动条的滚动方向

    以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...

  3. js 判断滚动条是不是在浏览器底部

    http://jingyan.baidu.com/album/86f4a73e91da7837d65269d5.html?picindex=2

  4. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  5. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  6. js 判断滚动条是否停止滚动

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

  7. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  8. 实现winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部

    判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为DataGridView控件添加Scroll事件,然后写入以下代码就可以了,应用范围:可实现分部加载数据 ...

  9. js判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...

  10. winform DataGridView控件判断滚动条是否滚动到当前已加载的数据行底部 z

    http://www.zuowenjun.cn/post/2015/05/20/162.html 判断 DataGridView控件滚动条是否滚动到当前已加载的数据行底部,其实方法很简单,就是为Dat ...

随机推荐

  1. avalonia自定义弹窗

    对于使用avalonia的时候某些功能需要到一些提示,比如异常或者成功都需要对用户进行提示,所以需要单独实现弹窗功能,并且可以自定义内部组件,这一期将手动实现一个简单的小弹窗,并且很容易自定义 创建项 ...

  2. python del 函数

    用法: -------del用于list列表操作,删除一个或者连续几个元素. # 定义一个list >>> a = [1,2,3,4]  >>> a [1,2,3, ...

  3. 一次代码重构 JavaScript 图连通性判定

    简介 说重构其实就是整理了代码,第一次自己手写写的很丑,然后看了书上写的,虽然和书上的思路不同但是整理后几乎一样漂亮 效果 整体代码如下 class Node { AdjNodes = new Set ...

  4. VUE10 计算属性

    1 Vue计算属性简介 1)定义:我们需要一个属性,但是这个属性不存在,但是可以通过已有的属性计算得来,那么就可以定义一个计算属性. 2)原理:底层借助了Object.defineproperty方法 ...

  5. JS 格式化时间字符串

    // 格式时间字符串 formatDateTimeStr(date, type) { if (date === '' || !date) { return '' } var dateObject = ...

  6. 【TS】枚举

    ts中,枚举类型就是,枚举里面的每个数据值都可以叫做元素,每个元素都有自己的编号,编号是从0开始的,依次递增加1 , 语法: enum 枚举名 {} 此处定义一个枚举类型,例如: enum Color ...

  7. ORACLE数据库相关操作

    表操作 -- 截断表 TRUNCATE TABLE TABLE_NAME; -- 删除表 DROP TABLE TABLE_NAME; -- 查询表 SELECT * FROM TABLE_NAME; ...

  8. xampp修改mysql数据库密码(测试成功)

    转载: http://www.360doc.com/content/17/0608/14/8797027_661063783.shtml ------------------------------- ...

  9. 简单添加table线条

    <table style="width: 100%; margin: 0 auto; border: 1px solid #BBBBBB; border-collapse: colla ...

  10. unity resMgr

    yooAsset GitHub - tuyoogame/YooAsset: unity3d resources management system xAsset GitHub - xasset/xas ...