<!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. 安装 Office project 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    昨天在安装project 时总是弹出下图中的提示框,在网上搜索了很多办法但是没有解决这个问题. 后来进入到office.zh-cn的文件夹中,在officemui.msi文件中右键卸载,然后在重新安装 ...

  2. javascrip基础学习

    JS是一种解释性脚本语言,在网页开发用经常用到(HTML CSS),用于控制网页的行为.现在RTT的柿饼UI也是用JS来开发的,所以很有必要学习一下. 注释:// ./*  */ 语句分行: 折行\ ...

  3. [转]25个HTML5和JavaScript游戏引擎库

    本文转自:http://www.open-open.com/news/view/27c6ed 1. The GMP JavaScript Game Engine GMP是一个基于精灵2-D游戏,它可以 ...

  4. Neutron命令测试3

    1.打开Ubuntu的/etc/network/interfaces文件 .默认内容如下 auto lo iface lo inet loopback 2.如果以DHCP方式配置网卡,则改为:auto ...

  5. Cloudera Manager卸载笔记

    1.通过管理平台分别停止组件服务和Cloudera Management Service 2.通过管理平台注销并移除Parcles (在控制台注销并移除,无论是安装的Parcles还是未安装的Parc ...

  6. ArrayList代码分析

    集合算是java中最常用的部分了,阅读该部分jdk代码可以让我们更加清楚的了解其实现原理,在使用时也能心中有数,有利于写出高质量的代码. ArrayList 底层数组实现,初始长度10,超过长度后的自 ...

  7. Windows窗体应用开发1

    1.Windows窗体的基本概念 2.Windows窗体应用程序 3.Windows窗体常见界面元素 4.Windows窗体中的事件处理 1.Windows窗体的基本概念 打开一个Window的系统应 ...

  8. dreamweaver,access2010,数学

    dreamweaver 1,点插入-表格-设置表格. 2,再次修改表格,打开属性修改指标. (修改图片时,也可以选中图片打开对应的属性修改) 设置字体: 1,打开属性-页面属性,弹出操作窗口,设置想改 ...

  9. 模糊查询（like）

    1. 找出名中包含 “厂”的所有供应商的名select * from provider where pro_name like '%厂%'2.第二个字为华select * from provider ...

  10. 使用dtd--声明实体

    1.预定义实体 符号 实体引用 < < > > & & ' &apos; " " 2.自定义实体 <!ENTITY addre ...