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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
vue-model实现简易计算器
Aug 17 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
人族 TERRAN 概述
2020/03/14 星际争霸
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php实现的通用图片处理类
2015/03/24 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python自动发邮件脚本
2017/03/31 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
详解如何减少python内存的消耗
2019/08/09 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
中科创达面试题
2016/12/28 面试题
JPA的优势都有哪些
2013/07/04 面试题
个人简历自我评价范文
2014/02/04 职场文书
网站推广策划方案
2014/06/04 职场文书
医学专业自荐信
2014/06/14 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
详解Django的MVT设计模式
2021/04/29 Python