<!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. spark RDD运算机制

  2. 在使用clone（）时id保持一致

    大家都知道,同一个HTML页面中,不宜出现1个以上相同名称的id.但有时候需要使用jQuery框架的clone()来复制相同内容(附带样式),假如是使用了id号的获取方式,即$(‘#***’) 那么复 ...

  3. Cloudera Kudu是什么？

    不多说,直接上干货! Cloudera Kudu是什么? kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式列式存储数据库.兼具了hbase的实时性.hdf ...

  4. 04-spring中的aop演示

    1 xml配置 1 导包 2 准备对象 package www.test.service; public interface UserService { public abstract void ad ...

  5. CSS选择器笔记，element element和element > element 的区别

    看官方解释 element element  例子: div p 官方解释:div内部所有的p元素 就是说 只要p在div内部.如果 p在span内部,span在div内部,p也算在div内部 < ...

  6. java多线程之原子变量

    看链接博客:http://blog.csdn.net/u011116672/article/details/51068828

  7. Java多线程使用wait和notify实现生产者消费者模型

    Java多线程使用wait和notify这两个关键字的学习,通过实现生成者与消费者来成对研究比较科学. 从两个字的意义来讲就是等待与通知这个简单道理. 现在先模拟一个缓存区存储,是用一个list实现的 ...

  8. 在C#.net中如何操作XML

    在C#.net中如何操作XML 需要添加的命名空间: using System.Xml; 定义几个公共对象: XmlDocument xmldoc ; XmlNode xmlnode ; XmlEle ...

  9. 文件选择之OpenFileDialog控件

    OpenFileDialog控件主要用于选择要打开的文件,在使用时可以在属性面变中设置属性,也可在代码中设置其属性 OpenFileDialog控件的属性 InitialDirectory 对话框的初 ...

  10. #与javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...