scrol家族 offset家族 client家族学习
Scroll 系列属性
scrollTop & scrollLeft
- scrollTop: 返回元素的内容已向上滚动的部分的高度。
- scrollLeft: 返回元素的内容已向左滚动的部分的宽度。
scrollHeight & scrollWidth
- scrollHeight: 返回元素的实际高度,包括由于溢出而在屏幕上不可见的内容。
- scrollWidth: 返回元素的实际宽度,包括由于溢出而在屏幕上不可见的内容。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Scroll Properties Example</title><style>#container {width: 200px;height: 200px;overflow: auto;border: 1px solid black;}.content {width: 300px;height: 300px;}</style>
</head>
<body><div id="container"><div class="content"></div></div><button onclick="logScrollProperties()">Log Scroll Properties</button><script>function logScrollProperties() {const container = document.getElementById('container');console.log(`scrollTop: ${container.scrollTop}`);console.log(`scrollLeft: ${container.scrollLeft}`);console.log(`scrollHeight: ${container.scrollHeight}`);console.log(`scrollWidth: ${container.scrollWidth}`);}// 示例:自动滚动到底部setTimeout(() => {const container = document.getElementById('container');container.scrollTop = container.scrollHeight;container.scrollLeft = container.scrollWidth;}, 2000);</script>
</body>
</html>
Offset 系列属性
offsetTop & offsetLeft
- offsetTop: 元素相对于最近的定位祖先元素(position != static)顶部的距离。如果没有这样的祖先,则相对于初始包含块(通常是视口)。
- offsetLeft: 元素相对于最近的定位祖先元素左侧的距离。如果没有这样的祖先,则相对于初始包含块。
offsetParent
- offsetParent: 返回一个指向最近的设置了 position 属性(除了static之外)的祖先元素。如果没有这样的祖先,则返回 null 或者 <body> 元素。
offsetHeight & offsetWidth
- offsetHeight: 包括 content + padding + border 的总高度。
- offsetWidth: 包括 content + padding + border 的总宽度。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Offset Properties Example</title><style>#outer {position: relative;top: 50px;left: 50px;width: 200px;height: 200px;background-color: lightblue;}#inner {position: absolute;top: 20px;left: 20px;width: 100px;height: 100px;background-color: yellow;}</style>
</head>
<body><div id="outer">Outer Div<div id="inner">Inner Div</div></div><button onclick="logOffsetProperties()">Log Offset Properties</button><script>function logOffsetProperties() {const outer = document.getElementById('outer');const inner = document.getElementById('inner');console.log(`Outer div's offsetTop: ${outer.offsetTop}, offsetLeft: ${outer.offsetLeft}`);console.log(`Inner div's offsetTop: ${inner.offsetTop}, offsetLeft: ${inner.offsetLeft}`);console.log(`Outer div's offsetHeight: ${outer.offsetHeight}, offsetWidth: ${outer.offsetWidth}`);console.log(`Inner div's offsetHeight: ${inner.offsetHeight}, offsetWidth: ${inner.offsetWidth}`);console.log(`Inner div's offsetParent: `, inner.offsetParent);}</script>
</body>
</html>
Client 系列属性
clientTop & clientLeft
- clientTop: 边框的厚度(上边框),不包括外边距、内填充或水平滚动条。
- clientLeft: 左侧边框的厚度。
clientHeight & clientWidth
- clientHeight: 可见区域的高度,包括内填充但不包括边框、外边距或水平滚动条。
- clientWidth: 可见区域的宽度,包括内填充但不包括边框、外边距或垂直滚动条。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Client Properties Example</title><style>#element {width: 200px;height: 200px;margin: 20px;padding: 10px;border: 5px solid red;overflow-y: scroll;}</style>
</head>
<body><div id="element">Some long text here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><button onclick="logClientProperties()">Log Client Properties</button><script>function logClientProperties() {const element = document.getElementById('element');console.log(`clientTop: ${element.clientTop}`); // Border thickness (top)console.log(`clientLeft: ${element.clientLeft}`); // Border thickness (left)console.log(`clientHeight: ${element.clientHeight}`); // Visible area including padding but excluding borders and scrollbarconsole.log(`clientWidth: ${element.clientWidth}`); // Same logic applies horizontally}</script>
</body>
</html>
总结
scroll | scrollTop | 元素内容垂直滚动的像素数。 |
scrollLeft | 元素内容水平滚动的像素数。 | |
scrollHeight | 元素内容的总高度,包括在视口中不可见的部分。 | |
scrollWidth | 元素内容的总宽度,包括在视口中不可见的部分。 | |
offset | offsetTop | 元素顶部相对于包含元素的顶部的距离。 |
offsetLeft | 元素左边缘相对于包含元素左边缘的距离。 | |
offsetHeight | 元素的高度,包括边框和内边距。 | |
offsetWidth | 元素的宽度,包括边框和内边距。 | |
client | clientTop | 元素的上边框的宽度。 |
clientLeft | 元素的左边框的宽度。 | |
clientHeight | 元素的内部高度,不包括水平滚动条高度。 | |
clientWidth | 元素的内部宽度,不包括垂直滚动条宽度。 |
相关文章:
scrol家族 offset家族 client家族学习
Scroll 系列属性 scrollTop & scrollLeft scrollTop: 返回元素的内容已向上滚动的部分的高度。scrollLeft: 返回元素的内容已向左滚动的部分的宽度。 scrollHeight & scrollWidth scrollHeight: 返回元素的实际高度,包括由于溢出而在屏幕上不可见的内容…...
css-background-color(transparent)
1.前言 在 CSS 中,background-color 属性用于设置元素的背景颜色。除了基本的颜色值(如 red、blue 等)和十六进制颜色值(如 #FF0000、#0000FF 等),还有一些特殊的属性值可以用来设置背景颜色。 2.backgrou…...

如何将xps文件转换为txt文件?xps转为pdf,pdf转为txt,提取pdf表格并转为txt
文章目录 xps转txt方法一方法二 pdf转txt整页转txt提取pdf表格,并转为txt 总结另外参考XPS文件转换为TXT文件XPS文件转换为PDF文件PDF文件转换为TXT文件提取PDF表格并转为TXT示例代码(部分) 本文测试代码已上传,路径如下ÿ…...

【Samba】Ubuntu20.04 Windows 共享文件夹
【Samba】Ubuntu20.04 Windows 共享文件夹 前言整体思路检查 Ubuntu 端 和 Windows 网络通信是否正常创建共享文件夹安装并配置 Samba 服务器安装 Samba 服务器创建 Samba 用户编辑 Samba 配置文件重启 Samba 服务器 在 Windows 端 访问 Ubuntu 的共享文件夹 前言 本文基于 Ub…...
gradle和maven的区别以及怎么选择使用它们
目录 区别 1. 配置方式 2. 依赖管理 3. 构建性能 4. 灵活性和扩展性 5. 多项目构建 如何选择使用 选择 Maven 的场景 选择 Gradle 的场景 区别 1. 配置方式 Maven: 使用基于 XML 的 pom.xml 文件进行配置。所有的项目信息、依赖管理、构建插件等都在这个文…...
360大数据面试题及参考答案
数据清理有哪些方法? 数据清理是指发现并纠正数据文件中可识别的错误,包括检查数据一致性,处理无效值和缺失值等。常见的数据清理方法有以下几种: 去重处理:数据中可能存在重复的记录,这不仅会占用存储空间,还可能影响分析结果。通过对比每条记录的关键属性,若所有关键…...
Myeclipse最新版本 C1 2019.4.0
Myeclipse C1 2019.4.0下载地址:链接: https://pan.baidu.com/s/1MbOMLewvAdemoQ4FNfL9pQ 提取码: tmf6 1.1、什么是集成开发环境? ★集成开发环境讲究-站式开发,使用这个工具即可。有提示功能,有自动纠错功能。 ★集成开发环境可以让软件开…...
MySQL 9.2.0 的功能
MySQL 9.2.0 的功能 MySQL 9.2.0 的功能新增、弃用和删除内容如下: 新增功能 权限新增12:引入了CREATE_SPATIAL_REFERENCE_SYSTEM权限,拥有该权限的用户可执行CREATE SPATIAL REFERENCE SYSTEM、CREATE OR REPLACE SPATIAL REFERENCE SYSTEM…...

接口 V2 完善:分布式环境下的 WebSocket 实现与 Token 校验
🎯 本文档详细介绍了如何使用WebSocket协议优化客户端与服务端之间的通信,特别是在处理异步订单创建通知的场景中。通过引入WebSocket代替传统的HTTP请求-响应模式,实现了服务器主动向客户端推送数据的功能,极大地提高了实时性和效…...
微前端架构在前端开发中的实践与挑战
随着单页面应用(SPA)和前端框架如 React、Vue、Angular 的快速发展,现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时,单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战,微前端架构…...

【自学嵌入式(6)天气时钟:软硬件准备、串口模块开发】
天气时钟:软硬件准备、串口模块开发 软硬件准备接线及模块划分ESP8266开发板引脚图软件准备 串口模块编写串口介绍Serial库介绍 近期跟着网上一些教学视频,编写了一个天气时钟,本篇及往后数篇都将围绕天气时钟的制作过程展开。本文先解决硬件…...

macbook安装go语言
通过brew来安装go语言 使用brew命令时,一般都会通过brew search看看有哪些版本 brew search go执行后,返回了一堆内容,最下方展示 If you meant "go" specifically: It was migrated from homebrew/cask to homebrew/core. Cas…...
代码随想录算法训练营第三十八天-动态规划-完全背包-322. 零钱兑换
太难了 但听了前面再听这道题感觉递推公式也不是不难理解 动规五部曲 dp[j]代表装满容量为j(也就是目标值)的背包最少物品数量递推公式:dp[j] std::min(dp[j], dp[j - coins[i]] 1)当使用coins[i]这张纸币时,要向前找到容量为…...

小阿卡纳牌
小阿卡纳牌 风:热湿 火:热干 水:冷湿 土:冷干 火风:温度相同,但是湿度不同,二人可能会在短期内十分热情,但是等待热情消退之后,会趋于平淡。 湿度相同、温度不同&#x…...
DDD 和 TDD
领域驱动设计(DDD) DDD 是一种软件开发方法,强调通过与领域专家的密切合作来构建一个反映业务逻辑的模型。其核心思想是将业务逻辑和技术实现紧密结合,以便更好地解决复杂的业务问题。 DDD 的关键概念: 1. 领域模型 …...
Java学习教程,从入门到精通,JDBC插入记录语法及案例(104)
JDBC插入记录语法及案例 一、JDBC插入记录语法 在JDBC中,插入记录主要通过执行SQL的INSERT语句来实现。其基本语法如下: INSERT INTO 表名 (列1, 列2, ..., 列n) VALUES (值1, 值2, ..., 值n);表名:需要插入记录的表的名称。列1, 列2, …,…...

Linux文件基本操作
Linux 的设计哲学 在 Linux 中,一切皆文件! 什么是文件? 文件是具有永久存储性,按特定字节顺序组成的命名数据集 文件可分为:文本文件,二进制文件 文本文件:每个文件存放一个 ASCII 码 存储…...
React 路由导航与传参详解
随着单页面应用(SPA)已经成为主流。React 作为最流行的前端框架之一,提供了强大的路由管理工具 react-router-dom,帮助开发者轻松实现页面导航和传参。本文将详细介绍如何使用 react-router-dom 构建路由导航、传参以及嵌套路由的…...
C#面试常考随笔6:ArrayList和 List的主要区别?
在 C# 中,ArrayList和List<T>(泛型列表)都可用于存储一组对象。推荐优先使用List<T>,因为它具有更好的类型安全性、性能和语法简洁性,并且提供了更丰富的功能。只有在需要与旧代码兼容或存储不同类型对象的…...

C#分页思路:双列表数据组合返回设计思路
一、应用场景 需要分页查询(并非全表查载入物理内存再筛选),返回列表1和列表2叠加的数据时 二、实现方式 列表1必查,列表2根据列表1的查询结果决定列表2的分页查询参数 三、示意图及其实现代码 1.示意图 黄色代表list1的数据&a…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...

GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...

基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...