<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="jquery.js"></script>

</head>

<body>

  <style>

    .box{

      height: 300px;

      border: 1px solid #000;

      font-size: 50px;

      overflow: auto;

    }

    </style>

  <p class="box" id="box">

      啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊

     啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊 啊啊啊啊啊啊啊

  </p>

  <script>

    var box = document.getElementById("box")

    box.onscroll = function() {

      console.log(box.scrollHeight,box.scrollTop,box.clientHeight);

      if(box.scrollHeight - box.scrollTop == box.clientHeight)

        console.log('到底了！');

    }

  </script>

</body>

</html>

scrollHeight, scrollTop, clientHeight的更多相关文章

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

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

  2. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  3. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

  4. 各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

    1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().le ...

  5. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  6. scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

    开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...

  7. 【日常总结】scrollTop、scrollHeight与clientHeight的重要关系

    前言 在做一个需求的时候涉及懒加载,百度了一下,发现scrollTop.scrollHeight与clientHeight这三个元素起到了重要作用,以前做过类似demo但是时间过太久忘记了,现在已经完 ...

  8. scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

    一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...

  9. scrollTop、scrollHeight与clientHeight

    MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部 ...

随机推荐

  1. Deep Learning 和 Knowledge Graph howto

    领军大家: Geoffrey E. Hinton http://www.cs.toronto.edu/~hinton/ 阅读列表: reading lists and survey papers fo ...

  2. Mac使用zsh导致maven命令无效的解决方案

    第一步: vim ~/.zshrc 第二步:在.zshrc末尾加上 source ~/.bash_profile: 保存推出了 第三步 source ~/.bash_profile

  3. sql查询约束

    写作业的时候发现书上竟然找不到查询约束的语句,百度搜了好久的资料,终于查询成功,在这里记录下来 主键约束 SELECT   tab.name AS [表名],   idx.name AS [主键名称] ...

  4. 3d Max 2010安装失败怎样卸载3dsmax？错误提示某些产品无法安装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  5. DP：凑零钱问题/最长非降子序列（C++）

    你给出一定数额的钱 i 元给我,我利用手中的硬币(m元, j元, k元...)兑换等值的钱给你,要求硬币数最少. 举例:给出1-11的钱,手中硬币有1元,3元,5元. 重点是找到状态和状态转移方程. ...

  6. Devexpress Xtrareport 打印报表

    需要引用 Using Devexpress.Xtrareport.UI: Using Devexpress.XtraPrinting.Localiztion 实例化报表,xtrareport my=n ...

  7. Linux访问https报错

    今天用Linux(CentOS)拉Git仓库时,报了个错unable to access 'https://github.com/Wind4/vlmcsd.git/': SSL connect err ...

  8. C#多线程进度条

    public class ZyjProgressBar : System.Windows.Forms.ProgressBar { //用于跨线程访问控件的委托 private delegate voi ...

  9. 对fastdfs 文件清单进行检查，打印无效的文件

    对fastdfs 文件清单进行检查,打印无效的文件2017年12月12日 18:37:18 守望dfdfdf 阅读数:281 标签: fastdfssftpmysql 更多个人分类: 工作 问题编辑版 ...

  10. JAVA SE collection接口

    collection接口:{Set,List,Queue} Set:无序集合,元素不可重复          List:有序集合,元素可重复          Queue:队列 Set{EnumSet ...