JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

全文参考：https://github.com/iuap-design/blog/issues/38 、MDN

clientHeight，只读

clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。

如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95

clientTop，只读

一个元素顶部边框的宽度（以像素表示）。嗯。。就只是border-top-width

类似的属性还有一个clientLeft，顾名思义……

offsetHeight，只读

元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），是一个整数。

还是上面的图，div的offsetHeight为112。计算：50+60(上下内边距)+2(上下边框)=112

offsetTop，只读

HTMLElement.offsetParent是一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则offsetParent为最近的table,table cell或根元素（标准模式下为html；quirks 模式下为body）。当元素的style.display设置为 "none" 时，offsetParent返回null。

它返回当前元素相对于其offsetParent元素的顶部的距离。

还是上面那张图，div的offsetTop为20，因为margin-top是20，距离html顶部的距离是20...

scrollHeight，只读

实话，这么久了，竟然一直搞错这个scroll相关属性，其实它描述的是outer的属性，而窝一直取inner的属性值，难怪scrollTop一直是0。。。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  #outer {
   margin: 100px 50px;
   background: url(http://images.cnblogs.com/cnblogs_com/wenruo/873448/o_esdese.jpg);
   height: 100px;
   width: 50px;
   padding: 10px 50px;
   overflow: scroll;
  }
  #inner {
   height: 200px;
   width: 50px;
   background-color: #d0ffe3;
  }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
</body>
</html>

因为限制了父元素的高度，所以不能全部显示子元素，设置了overflow之后，可以通过滚动条的形式滑动查看子元素。效果如图1，如果没有限制父元素的高度，那么效果将如图2显示。

（图1） （图2）

scrollHeight就是图2的高度，没有高度限制时，能够完全显示子元素时的高度（clientHeight）。

所以这里scrollHeight为220，计算：200+10+10=220

scrollTop，可写

是这些元素中唯一一个可写可读的。

下面的图是用微信截图随便画的:D（不小心混入了一个光标。。

所以当滚动条在最顶端的时候，scrollTop=0，当滚动条在最低端的时候，scrollTop=115

这个115怎么来的（滚动条高度是15，我量的），见下图。（实为我主观臆测，不保证准确性。。。_(:з」∠)_

scrollTop是一个整数。

如果一个元素不能被滚动，它的scrollTop将被设置为0。

设置scrollTop的值小于0，scrollTop被设为0。

如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。

判定元素是否滚动到底：

element.scrollHeight - element.scrollTop === element.clientHeight

返回顶部

element.scrollTop = 0

一个简单的返回顶部的时间，一个需要注意的地方是，动画是由快到慢的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>返回顶部</title>
 <style>
  #outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; }
 </style>
</head>
<body>
 <div id="outer">
  <div id="inner"></div>
 </div>
 <button onclick="toTop(outer)">返回顶部</button>
 <script>
  function toTop(ele) {
   // ele.scrollTop = 0;
   let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小
   if (ele.scrollTop > 0) {
    ele.scrollTop -= Math.max(dy, 10);
    setTimeout(() => {
     toTop(ele, dy);
    }, 30);
   }
  }
  // 初始化
  window.onload = () => {
   for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\n`;
  }
 </script>
</body>
</html>

到此这篇关于JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记的文章就介绍到这了,更多相关JavaScript scrollTop scrollHeight offsetTop offsetHeight内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen

  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js中scrollTop()方法和scroll()方法用法示例

    本文实例讲述了js中scrollTop()方法和scroll()方法用法.分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div").scrollTop()://获得 scroll top offset 触发滚动事件 $(selector).scroll() 将函数绑定到滚动事件中: $(selector).scro

  • javascript scrollTop正解使用方法

    javascript scrollTop 获取滚动条相对于其顶部的偏移(如制作自动显示隐藏的"返回顶部"按钮).在实际应用中经常会遇到以下问题:document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为0 1.各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异

  • JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算. 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop,只读 一

  • JavaScript高级程序设计（第三版）学习笔记1~5章

    第2章,在html中使用JavaScript Html引入外部js脚本 <script type="text/javascript" src="test.js">两个</script>之间不应放脚本,因为并不会被执行</script> <script>标签有一个defer属性可以延迟脚本执行,但是并不保证会按脚本排列顺序执行 建议:将脚本引入放在<body>标签的所有内容之后,而不放在<head>

  • JavaScript高级程序设计（第三版）学习笔记6、7章

    第6章,面向对象的程序设计 对象: 1.数据属性 configurable,表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerbale,表示能否通过for-in访问属性,默认true ƒwritable,表示能否修改属性值,默认true „value,数据存储位置,默认undefined 修改默认属性特性:Object.defineProperty(),接收三个参数:属性所在对象,属性名,描述符对象,描述符对象属性必

  • JavaScript高级程序设计（第3版）学习笔记6 初识js对象

    在房子里面可以放你想放的任意事物--如果你有足够的美学造诣,你甚至可以弄一个房中房试试--当然,为了方便管理,我们会给房子里存放的所有事物都会取上一个不重复的名字,比如医药房间里的各种药品名称.在ECMAScript中,你可以在对象中存放任意你想放的数据,同样,我们需要给存放的数据取一个名字--也就是对象的属性名,再存放各种数据.再看看ECMA-262中对象的定义:无序属性的集合,其属性可以包含简单数据类型值.对象或者函数. 进入对象,我开始有些激动了,说实话,让我想起做这系列学习笔记的最初原因

  • JavaScript高级程序设计（第3版）学习笔记 概述

    在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助. 相关术语 先简要说一下和JavaScript相关的一些背景术语,就不详细

  • JavaScript高级程序设计（第3版）学习笔记2 js基础语法

    这一篇复习一下ECMAScript规范中的基础语法,英文好的朋友可以直接阅读官方文档.JavaScript本质上也是一种类C语言,熟悉C语言的朋友,可以非常轻松的阅读这篇文章,甚至都可以跳过,不过建议你最好还是看一看,在介绍的同时,我可能会引用一些自认为不易理解且比较流行的用法. 基础语法 1.标识符:所谓标识符,实际上就是指一个满足一定规范,能够被引擎识别的名字,可以用来表示常量.变量.函数名.函数参数.对象.对象属性等所有可命名对象的名称. (1)区分大小写. (2)以字母.下划线(_)或美

  • JavaScript高级程序设计（第3版）学习笔记3 js简单数据类型

    ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

  • JavaScript高级程序设计（第3版）学习笔记8 js函数（中）

    6.执行环境和作用域 (1)执行环境(execution context):所有的JavaScript代码都运行在一个执行环境中,当控制权转移至JavaScript的可执行代码时,就进入了一个执行环境.活动的执行环境从逻辑上形成了一个栈,全局执行环境永远是这个栈的栈底元素,栈顶元素就是当前正在运行的执行环境.每一个函数都有自己的执行环境,当执行流进入一个函数时,会将这个函数的执行环境压入栈顶,函数执行完之后再将这个执行环境弹出,控制权返回给之前的执行环境. (2)变量对象(variable ob

  • JavaScript高级程序设计（第3版）学习笔记12 js正则表达式

    需要指出的是,这里只是总结了正则表达式的常用的且比较简单的语法,而不是全部语法,在我看来,掌握了这些常用语法,已经足够应对日常应用了.正则表达式不只是应用在ECMAScript中,在JAVA..Net.Unix等也有相应应用,这篇文章则是以ECMAScript中的正则表达式为基础总结的. 一.正则表达式基础 1.普通字符:字母.数字.下划线.汉字以及所有没有特殊意义的字符,如ABC123.在匹配时,匹配与之相同的字符. 2.特殊字符:(需要时,使用反斜杠"\"进行转义) 字符 含义 字

  • JavaScript高级程序设计（第3版）学习笔记9 js函数（下）

    再接着看函数--具有魔幻色彩的对象. 9.作为值的函数 在一般的编程语言中,如果要将函数作为值来使用,需要使用类似函数指针或者代理的方式来实现,但是在ECMAScript中,函数是一种对象,拥有一般对象具有的所有特征,除了函数可以有自己的属性和方法外,还可以做为一个引用类型的值去使用,实际上我们前面的例子中已经有过将函数作为一个对象属性的值,又比如函数也可以作为另一个函数的参数或者返回值,异步处理中的回调函数就是一个典型的用法. 复制代码 代码如下: var name = 'linjisong'

随机推荐