<!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. 如何在smarty模板中执行php代码

    Smarty模板主要的目的是分离逻辑层和表现层,所以在模板中不应该包含逻辑部分,逻辑层也不应该含有HTML.要在模板中插入逻辑程序的这种做法"非常"不被推荐,在你的case中. 如 ...

  2. php锁定文本框内容的方法

    有时候我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如<input type="text" name="zg" value="中国& ...

  3. 打乱式排序的Java版实现

    项目中涉及到对大批量的数据进行打乱式排序,大概原理如下: 输入源数据:1,1,2,3,3,3,4,4 输出结果:   1,2,3,4,1,3,4,3 实现代码如下,采用递归的思想: static &l ...

  4. pyhon虚拟环境的安装和使用

    安装Python2.7: 1.Mac下使用Python2.7 2.Windows下安装Python2.7. *从python官网下载python2.7的版本 *双击python2.7,然后选择安装路径 ...

  5. （开发）bable - es6转码

    参考:http://www.ruanyifeng.com/blog/2016/01/babel.html Babel Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执 ...

  6. css多行文本溢出显示省略号

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  7. 用代码初始化AE控件许可

    当AE二次开发与其他平台一起使用的时候,有时候会不方便加LicenseControl控件,需要用代码初始化许可: 在构造函数中初始化许可: public Form1() { InitializeCom ...

  8. Android基础Activity篇——Intent向下一个活动传递数据

    1.向下一个活动传递数据 String data ="bilibilbilbilbili"; Intent intent1=new Intent(this,secondActivi ...

  9. hibernate 模拟实现和What is and Why O/R Mapping

    What is and Why O/R Mapping What is : 用面向对象的方式调用api,类库帮我们翻译成面向关系的方式. Why: 1.JDBC操作数据库很繁琐2.Sql 语句编写并不 ...

  10. POJO详解

    转自:http://blog.csdn.net/lushuaiyin/article/details/7436318  一:什么是POJO POJO的名称有多种,pure old java objec ...