<!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. shell查看内存

    <1>jps<2>ps<3>free<4>df<5>top jps: 很多Java命令都在jdk的JAVA_HOME/bin/目录下面,jp ...

  2. suffix ACM-ICPC 2017 Asia Qingdao

    Consider n given non-empty strings denoted by s1 , s2 , · · · , sn . Now for each of them, you need ...

  3. 性能测试工具LoadRunner30-LR之监控Tomcat

    步骤: 1.通过LR去访问tomcat监控页(安装tomcat的过程可以百度一下) 2.然后通过关联取监控数据 3.通过lr_user_data_point()添加数据到图表中去 double ato ...

  4. [Android]对字符串进行MD5加密

    /** * 将字符串转成MD5值 * * @param string * @return */ public static String stringToMD5(String string) { by ...

  5. phpstorm 10 注册码

    phpstorm 10 注册码 注册时选择License server,填http://idea.lanyus.com,然后点击OK 网上看评论的结果,亲测,有用!!!

  6. 显示器分辨率不同，部分winform控件在其他机器上显示不全

    在开发机器上效果如下: 而到其他电脑上效果如下: 解决办法: 将窗体的AutoScaleMode属性设置为None,尝试一下,应该可以了. 关于AutoScaleMode的属性,可以参考 http:/ ...

  7. springboot从入门到精通（一）

    springboot到底有什么好处?有什么优势?这个先不用看,我们只要知道它有很多优势,现在要做的事只有一件,那就是撸代码!撸完就知道有多少料! 首先,在案例中,我们会构建一个英雄列表应用.操作如下: ...

  8. Hibernate课程 初探一对多映射3-3 单向多对一的测试

    public static void testManyToOne(){ Student stu1 = new Student("小明","男"); Studen ...

  9. MySQL(三) 完整性约束

    一.介绍 约束条件与数据类型的宽度意义,都是可选参数. 作用:用于保证数据的完整性和一致性. 主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN ...

  10. 让你的sharepoint2013具有EMS快递查询的功能

    <iframe name="kuaidi100" src="http://www.kuaidi100.com/frame/app/index2.html" ...