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


Posted in Javascript onJuly 15, 2020

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

clientHeight,只读

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

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

如图,这样一个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显示。

JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记(图1) JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记(图2)

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

所以这里scrollHeight为220,计算:200+10+10=220

scrollTop,可写

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

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

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

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

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

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

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

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

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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
再谈javascript面向对象编程
Mar 18 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 #Javascript
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 #Javascript
Vue中keep-alive的两种应用方式
Jul 15 #Javascript
js实现浏览器打印功能的示例代码
Jul 15 #Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
详解JavaScript 作用域
Jul 14 #Javascript
You might like
php基础知识:函数基础知识
2006/12/13 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php实现RSA加密类实例
2015/03/26 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
Python open读写文件实现脚本
2008/09/06 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Django 拆分model和view的实现方法
2019/08/16 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
先进学校事迹材料
2014/12/30 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python