铁雪资源网 Design By www.gsvan.com

全文参考: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>
标签:
scrollTop,scrollHeight,offsetTop,offsetHeight

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记”

暂无JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?