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

站长资源 2024/11/24 佚名

22 1538 22

DDR爱好者之家 Design By 杰米

全文参考：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>

scrollTop,scrollHeight,offsetTop,offsetHeight

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

微信小程序实现列表的横向滑动方式

JavaScript实时更新当前的时间的示例代码

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接