【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight

scrollTop、scrollHeight、clientTop、clientHeight、offsetTop以及offsetHeight

1. scrollTop 与 scrollHeight

1.1 scrollTop

scrollTop 是这六个属性中唯一一个可写的属性。

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

如下图:

在这里插入图片描述

由于这个属性是可写的,其可以被设置为任何整数值,但在赋值时有以下注意点:

  • 如果一个元素不能被滚动,那么赋值后,scrollTop 属性仍将被设置为0
  • 设置scrollTop的值小于0,则赋值后,scrollTop 被设为0
  • 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

同时,由于该属性可写的特性,我们经常会使用该属性来实现回到顶部的效果:element.scrollTop = 0

1.2 scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所有内容所需的最小高度,即元素内容的真实高度。

没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。

scrollHeight 包括元素的padding,但不包括元素的bordermargin。另外,scrollHeight也包括 ::before::after这样的伪元素。

如下图:

在这里插入图片描述

根据该属性的定义,我们常常利用该属性与 scrollTopclientHeight 之间的关系来判断元素是否滚动到底部:element.scrollHeight - element.scrollTop === element.clientHeight

2. clientTop 与 clientHeight

2.1 clientTop

clientTop 同样是一个只读属性,其表示一个元素顶部边框的宽度,这个宽度并不包括顶部外边距或内边距。

2.2 clientHeight

这个属性同样是是只读属性,对于没有定义CSS高度或者内部元素的元素,该属性值为0。

若定义了高度或内部的元素,则它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距

实际上,clientHeight 就是height + padding - 滚动条的值,即元素内容在视口中展示的高度

如下图:

在这里插入图片描述

3. offsetTop 与 offsetHeight

3.1 offsetTop

要了解 offsetTop 属性,首先需要了解 Element.offsetParent 属性。

Element.offsetParent 属性指向最近的包含该元素的定位元素。如果找不到,则指向最近的 tabel 或 table cell 元素,或者是根元素(标准模式下为html;quirks 模式下为body)。另外,当元素的 display 属性设置为 none 时,offsetParent 属性指向 null

offsetTop 属性,其表示了当前元素相对于其 offsetParent 元素的顶部内边距的距离。

3.2 offsetHeight

HTMLElement.offsetHeight 同样是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。

通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),但不包含:before:after等伪类元素的高度。或者说,offsetHeight元素内容、元素边框以及滚动条在视口中展示的高度

如下图:

在这里插入图片描述

另外,需要注意的是,当一个元素被隐藏时,该属性返回0。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/120016.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Alfred 5 for mac(最好用的苹果mac效率软件)中文最新版

Alfred 5 Mac是一款非常实用的工具,它可以帮助用户更加高效地使用Mac电脑。用户可以学会使用快捷键、全局搜索、快速启动应用程序、使用系统维护工具、快速复制粘贴文本以及自定义设置等功能,以提高工作效率。 Alfred for Mac 的一些主要功能包括&#…

C++入门学习(1)命名空间和输入输出

前言 在C语言和基本的数据结构学习之后,我们终于迎来了期待已久的C啦!C发明出来的意义就是填补一些C语言的不足,让我们更加方便的写代码,所以今天我们就来讲一下C语言不足的地方和在C中的解决办法! 一、命名空间 在学习…

Linux开发工具的使用(vim、gcc/g++ 、make/makefile)

文章目录 一 :vim1:vim基本概念2:vim的常用三种模式3:vim三种模式的相互转换4:vim命令模式下的命令集- 移动光标-删除文字-剪切/删除-复制-替换-撤销和恢复-跳转至指定行 5:vim底行模式下的命令集 二:gcc/g1:gcc/g的作用2:gcc/g的语法3:预处理4:编译5:汇编6:链接7:函…

【Sql】sql server数据库提示:执行Transact-SQL语句或批处理时发生了异常。 无法打开数据库msdb,错误:926。

【问题描述】 打开sql server2008r2数据库的时候, 系统提示执行Transact-SQL语句或批处理时发生了异常。 无法打开数据库msdb,错误:926。 【概念理解】 首先MSDB数据库是的作用: 用于给SQL Server代理提供必要的信息来运行调度警…

2 快速上手使用Paimon数据湖

2.1 基于Flink SQL操作Paimon 在这里我们基于Flink 1.15(ON YARN)、Paimon 0.5版本开发一个案例。 注意:想要使用Paimon是非常简单的,不需要复杂的安装部署,只需要使用一个jar包即可对它进行操作。 我们在使用Paimon的时候其实也可以把它简单…

云闪付支付接口的技术实现方式

(一)整体框架。      云闪付的整体架构如图 1 所示,总体与原有的支付清算体系相同,只是增加了云端支付平台、移动应用平台和移动应用。云端支付平台主要对移动应用端的限制密钥进行更新和管理,同时对云端支付账户进…

2011年408计网

第33题 TCP/IP 参考模型的网络层提供的是()A. 无连接不可靠的数据报服务B. 无连接可靠的数据报服务C. 有连接不可靠的虚电路服务D. 有连接可靠的虚电路服务 本题考查TCP/IP 参考模型的网络层 若网络层提供的是虚电路服务,则必须建立网络层的…

WPF中依赖属性及附加属性的概念及用法

完全来源于十月的寒流,感谢大佬讲解 依赖属性 由依赖属性提供的属性功能 与字段支持的属性不同,依赖属性扩展了属性的功能。 通常,添加的功能表示或支持以下功能之一: 资源数据绑定样式动画元数据重写属性值继承WPF 设计器集成 …

佳能相机拍出来的dat文件怎么修复为正常视频

3-3 佳能相机是普通人用得最多的相机之一,也有一些专业机会用于比较重要的场景,比如婚庆、会议录像、家庭录像使用等。 但作为电子产品,经常会出现一些奇怪的故障,最严重的应该就是拍出来的东西打不开了。 本文案例是佳能相机拍…

校园安防监控系统升级改造方案:如何实现设备利旧上云与AI视频识别感知?

一、背景与需求分析 随着现代安防监控科技的兴起和在各行各业的广泛应用,监控摄像头成为众所周知的产品,也为人类的工作生活提供了很大的便利。由于科技的发达,监控摄像头的升级换代也日益频繁。每年都有不计其数的摄像头被拆掉闲置&#xf…

51单片机-串口通信

文章目录 前言1.基础介绍2.串口实战3.4. 前言 1.基础介绍 常见1,2,3,电源 常用方式1 fosc外部晶振 2.串口实战 3. 4.

软件测试/测试开发丨探索Python的魔力:从第一个程序到快捷键大揭秘

点此获取更多相关资料 第一个 Python 程序 通过程序输出 Hello World 是在学习每一门编程语言时,都会接触到的第一个程序。 在 Python 中,可以通过内置函数 print() 实现向控制台输出 Hello World 。 使用 print()输出 可以进入 命令行交互模式 或使…

从研发域到量产域的自动驾驶工具链探索与实践

导读 本文整理自 2023 年 9 月 5 日百度云智大会 - 智能汽车分论坛,百度智能云自动驾驶云研发高级经理徐鹏的主题演讲《从研发域到量产域的自动驾驶工具链探索与实践》。 全文中部段落附有演讲中 2 个产品演示视频的完整版,精彩不容错过。 (视频观看&…

生态环境领域基于R语言piecewiseSEM结构方程模型

结构方程模型(Sructural Equation Modeling,SEM)可分析系统内变量间的相互关系,并通过图形化方式清晰展示系统中多变量因果关系网,具有强大的数据分析功能和广泛的适用性,是近年来生态、进化、环境、地学、…

【网络】五中IO模型介绍 + 多路转接中select和poll服务器的简单编写

高级IO 前言正式开始前面的IO函数简单过一遍什么叫做低效的IO钓鱼的例子同步IO和异步IO五种IO模型阻塞IO非阻塞IO信号驱动多路转接异步IO 小结 代码演示非阻塞IO多路转接select介绍简易select服务器timeout 为 nullptrtimeout 为 {0, 0}timeout 为 {5, 0}调用accept select编写…

macos端串口调试推荐 serial直装激活 for mac

serial for mac版软件特色 1.准备好macOS High Sierra 最近的升级是否会让您的设备落后?Serial将使其恢复正常工作,同时保持Mac的安全功能完好无损。 2.完美无瑕的仿真 Serial是一个全功能的终端仿真器,支持Xterm,VT102和ANSI…

pyspark连接mysql数据库报错

使用pyspark连接mysql数据库代码如下 spark_conf SparkConf().setAppName("MyApp").setMaster("local")spark SparkSession.builder.config(confspark_conf).getOrCreate()url "jdbc:mysql://localhost:3306/test?useUnicodetrue&characterE…

Mactracker for mac(硬件信息查询工具)免费下载

想知道你电脑的信息吗?Mactracker Mac版是Macos上一款硬件信息查询工具,可以查询电脑中的硬件信息,还可以查看您使用软件的具体情况,苹果电脑产品和周边产品的信息,售价等等,让您对电脑有更多深刻的了解。 …

NowCoder | 环形链表的约瑟夫问题

NowCoder | 环形链表的约瑟夫问题 OJ链接 思路&#xff1a; 创建带环链表带环链表的删除节点 代码如下&#xff1a; #include<stdlib.h>typedef struct ListNode ListNode; ListNode* ListBuyNode(int x) {ListNode* node (ListNode*)malloc(sizeof(ListNode));node…

Zabbix如何监控腾讯云NAT网关

1、NAT网关介绍 NAT 网关&#xff08;NAT Gateway&#xff09;是一种支持 IP 地址转换服务&#xff0c;提供网络地址转换能力&#xff0c;主要包括SNAT&#xff08;Source Network Address Translation&#xff0c;源网络地址转换&#xff09;和DNAT&#xff08;Destination N…