当前位置： 首页 > news >正文

scrol家族 offset家族 client家族学习

news 2026/4/1 7:17:26

Scroll 系列属性

scrollTop & scrollLeft

  1. scrollTop: 返回元素的内容已向上滚动的部分的高度。
  2. scrollLeft: 返回元素的内容已向左滚动的部分的宽度。

scrollHeight & scrollWidth

  1. scrollHeight: 返回元素的实际高度，包括由于溢出而在屏幕上不可见的内容。
  2. 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

  1. offsetTop: 元素相对于最近的定位祖先元素（position != static）顶部的距离。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
  2. offsetLeft: 元素相对于最近的定位祖先元素左侧的距离。如果没有这样的祖先，则相对于初始包含块。

offsetParent

  1. offsetParent: 返回一个指向最近的设置了 position 属性（除了static之外）的祖先元素。如果没有这样的祖先，则返回 null 或者 <body> 元素。

offsetHeight & offsetWidth

  1. offsetHeight: 包括 content + padding + border 的总高度。
  2. 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

  1. clientTop: 边框的厚度（上边框），不包括外边距、内填充或水平滚动条。
  2. clientLeft: 左侧边框的厚度。

clientHeight & clientWidth

  1. clientHeight: 可见区域的高度，包括内填充但不包括边框、外边距或水平滚动条。
  2. 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>

总结

scrollscrollTop元素内容垂直滚动的像素数。
scrollLeft元素内容水平滚动的像素数。
scrollHeight元素内容的总高度，包括在视口中不可见的部分。
scrollWidth元素内容的总宽度，包括在视口中不可见的部分。
offsetoffsetTop元素顶部相对于包含元素的顶部的距离。
offsetLeft元素左边缘相对于包含元素左边缘的距离。
offsetHeight元素的高度，包括边框和内边距。
offsetWidth元素的宽度，包括边框和内边距。
clientclientTop元素的上边框的宽度。
clientLeft元素的左边框的宽度。
clientHeight元素的内部高度，不包括水平滚动条高度。
clientWidth元素的内部宽度，不包括垂直滚动条宽度。

相关文章：

scrol家族 offset家族 client家族学习

Scroll 系列属性 scrollTop & scrollLeft scrollTop: 返回元素的内容已向上滚动的部分的高度。scrollLeft: 返回元素的内容已向左滚动的部分的宽度。 scrollHeight & scrollWidth scrollHeight: 返回元素的实际高度&#xff0c;包括由于溢出而在屏幕上不可见的内容…...

编程日记 2025/1/29 7:16:03

css-background-color（transparent）

1.前言 在 CSS 中&#xff0c;background-color 属性用于设置元素的背景颜色。除了基本的颜色值&#xff08;如 red、blue 等&#xff09;和十六进制颜色值&#xff08;如 #FF0000、#0000FF 等&#xff09;&#xff0c;还有一些特殊的属性值可以用来设置背景颜色。 2.backgrou…...

编程日记 2025/1/29 7:13:57

如何将xps文件转换为txt文件？xps转为pdf，pdf转为txt，提取pdf表格并转为txt

文章目录 xps转txt方法一方法二 pdf转txt整页转txt提取pdf表格&#xff0c;并转为txt 总结另外参考XPS文件转换为TXT文件XPS文件转换为PDF文件PDF文件转换为TXT文件提取PDF表格并转为TXT示例代码&#xff08;部分&#xff09; 本文测试代码已上传&#xff0c;路径如下&#xff…...

编程日记 2025/1/29 7:03:47

【Samba】Ubuntu20.04 Windows 共享文件夹

【Samba】Ubuntu20.04 Windows 共享文件夹 前言整体思路检查 Ubuntu 端 和 Windows 网络通信是否正常创建共享文件夹安装并配置 Samba 服务器安装 Samba 服务器创建 Samba 用户编辑 Samba 配置文件重启 Samba 服务器 在 Windows 端 访问 Ubuntu 的共享文件夹 前言 本文基于 Ub…...

编程日记 2025/1/29 6:59:43

gradle和maven的区别以及怎么选择使用它们

目录 区别 1. 配置方式 2. 依赖管理 3. 构建性能 4. 灵活性和扩展性 5. 多项目构建 如何选择使用 选择 Maven 的场景 选择 Gradle 的场景 区别 1. 配置方式 Maven&#xff1a; 使用基于 XML 的 pom.xml 文件进行配置。所有的项目信息、依赖管理、构建插件等都在这个文…...

编程日记 2025/1/29 6:56:39

360大数据面试题及参考答案

数据清理有哪些方法？ 数据清理是指发现并纠正数据文件中可识别的错误，包括检查数据一致性，处理无效值和缺失值等。常见的数据清理方法有以下几种： 去重处理：数据中可能存在重复的记录，这不仅会占用存储空间，还可能影响分析结果。通过对比每条记录的关键属性，若所有关键…...

编程日记 2025/1/29 6:54:31

Myeclipse最新版本 C1 2019.4.0

Myeclipse C1 2019.4.0下载地址&#xff1a;链接: https://pan.baidu.com/s/1MbOMLewvAdemoQ4FNfL9pQ 提取码: tmf6 1.1、什么是集成开发环境? ★集成开发环境讲究-站式开发&#xff0c;使用这个工具即可。有提示功能&#xff0c;有自动纠错功能。 ★集成开发环境可以让软件开…...

编程日记 2025/1/29 6:52:28

MySQL 9.2.0 的功能

MySQL 9.2.0 的功能 MySQL 9.2.0 的功能新增、弃用和删除内容如下&#xff1a; 新增功能 权限新增12&#xff1a;引入了CREATE_SPATIAL_REFERENCE_SYSTEM权限&#xff0c;拥有该权限的用户可执行CREATE SPATIAL REFERENCE SYSTEM、CREATE OR REPLACE SPATIAL REFERENCE SYSTEM…...

编程日记 2025/1/29 6:51:18

接口 V2 完善：分布式环境下的 WebSocket 实现与 Token 校验

&#x1f3af; 本文档详细介绍了如何使用WebSocket协议优化客户端与服务端之间的通信&#xff0c;特别是在处理异步订单创建通知的场景中。通过引入WebSocket代替传统的HTTP请求-响应模式&#xff0c;实现了服务器主动向客户端推送数据的功能&#xff0c;极大地提高了实时性和效…...

编程日记 2025/1/29 6:48:09

微前端架构在前端开发中的实践与挑战

随着单页面应用&#xff08;SPA&#xff09;和前端框架如 React、Vue、Angular 的快速发展&#xff0c;现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时&#xff0c;单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战&#xff0c;微前端架构…...

编程日记 2025/1/29 6:47:03

【自学嵌入式（6）天气时钟：软硬件准备、串口模块开发】

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

编程日记 2025/1/29 6:43:58

macbook安装go语言

通过brew来安装go语言 使用brew命令时&#xff0c;一般都会通过brew search看看有哪些版本 brew search go执行后&#xff0c;返回了一堆内容&#xff0c;最下方展示 If you meant "go" specifically: It was migrated from homebrew/cask to homebrew/core. Cas…...

编程日记 2025/1/29 6:42:54

代码随想录算法训练营第三十八天-动态规划-完全背包-322. 零钱兑换

太难了 但听了前面再听这道题感觉递推公式也不是不难理解 动规五部曲 dp[j]代表装满容量为j&#xff08;也就是目标值&#xff09;的背包最少物品数量递推公式&#xff1a;dp[j] std::min(dp[j], dp[j - coins[i]] 1)当使用coins[i]这张纸币时&#xff0c;要向前找到容量为…...

编程日记 2025/1/29 6:39:39

小阿卡纳牌

小阿卡纳牌 风&#xff1a;热湿 火&#xff1a;热干 水&#xff1a;冷湿 土&#xff1a;冷干 火风&#xff1a;温度相同&#xff0c;但是湿度不同&#xff0c;二人可能会在短期内十分热情&#xff0c;但是等待热情消退之后&#xff0c;会趋于平淡。 湿度相同、温度不同&#x…...

编程日记 2025/1/29 6:37:30

DDD 和 TDD

领域驱动设计&#xff08;DDD&#xff09; DDD 是一种软件开发方法&#xff0c;强调通过与领域专家的密切合作来构建一个反映业务逻辑的模型。其核心思想是将业务逻辑和技术实现紧密结合&#xff0c;以便更好地解决复杂的业务问题。 DDD 的关键概念&#xff1a; 1. 领域模型 …...

编程日记 2025/1/29 6:35:23

Java学习教程，从入门到精通，JDBC插入记录语法及案例（104）

JDBC插入记录语法及案例 一、JDBC插入记录语法 在JDBC中&#xff0c;插入记录主要通过执行SQL的INSERT语句来实现。其基本语法如下&#xff1a; INSERT INTO 表名 (列1, 列2, ..., 列n) VALUES (值1, 值2, ..., 值n);表名&#xff1a;需要插入记录的表的名称。列1, 列2, …,…...

编程日记 2025/1/29 6:33:21

Linux文件基本操作

Linux 的设计哲学 在 Linux 中&#xff0c;一切皆文件&#xff01; 什么是文件&#xff1f; 文件是具有永久存储性&#xff0c;按特定字节顺序组成的命名数据集 文件可分为&#xff1a;文本文件&#xff0c;二进制文件 文本文件&#xff1a;每个文件存放一个 ASCII 码 存储…...

编程日记 2025/1/29 6:32:20

React 路由导航与传参详解

随着单页面应用&#xff08;SPA&#xff09;已经成为主流。React 作为最流行的前端框架之一&#xff0c;提供了强大的路由管理工具 react-router-dom&#xff0c;帮助开发者轻松实现页面导航和传参。本文将详细介绍如何使用 react-router-dom 构建路由导航、传参以及嵌套路由的…...

编程日记 2025/1/29 6:31:17

C#面试常考随笔6：ArrayList和 List的主要区别？

在 C# 中&#xff0c;ArrayList和List<T>&#xff08;泛型列表&#xff09;都可用于存储一组对象。推荐优先使用List<T>&#xff0c;因为它具有更好的类型安全性、性能和语法简洁性&#xff0c;并且提供了更丰富的功能。只有在需要与旧代码兼容或存储不同类型对象的…...

编程日记 2025/1/29 6:27:10

C#分页思路：双列表数据组合返回设计思路

一、应用场景 需要分页查询&#xff08;并非全表查载入物理内存再筛选&#xff09;&#xff0c;返回列表1和列表2叠加的数据时 二、实现方式 列表1必查&#xff0c;列表2根据列表1的查询结果决定列表2的分页查询参数 三、示意图及其实现代码 1.示意图 黄色代表list1的数据&a…...

编程日记 2025/1/29 6:26:09

trae中安装mcp报Cannot find package/ERR_MODULE_NOT_FOUND问题

简介 我在trae中安装高德地图的mcp和其他的mcp报出了以下错误&#xff0c;以此记录并分享给大家。 新的改变 node:internal/modules/esm/resolve:204 const resolvedOption FSLegacyMainResolve(pkgPath, packageConfig.main, baseStringified); ^ Error: Cannot find pack…...

编程新知 2026/4/1 6:29:39

Vue3 + FFmpeg.wasm 实战：5分钟搞定浏览器端视频格式转换（附完整代码）

Vue3 FFmpeg.wasm&#xff1a;浏览器端视频处理的革命性方案 当现代Web应用越来越依赖多媒体处理能力时&#xff0c;传统依赖后端转码的方案暴露出明显短板&#xff1a;上传耗时、服务器压力大、隐私数据外流风险。而FFmpeg.wasm的出现彻底改变了这一局面——这个基于WebAssem…...

编程新知 2026/4/1 6:23:34

KityMinder云存储与分享功能完整指南：打造高效团队协作体验

KityMinder云存储与分享功能完整指南&#xff1a;打造高效团队协作体验 【免费下载链接】kityminder 百度脑图 项目地址: https://gitcode.com/gh_mirrors/ki/kityminder KityMinder作为百度FEX团队开发的在线思维导图工具&#xff0c;其强大的云存储与分享功能让团队协…...

编程新知 2026/4/1 5:18:55

Qwen3-ASR-0.6B作品集：Qwen3-ForcedAligner-0.6B时间戳精度图谱

Qwen3-ASR-0.6B作品集&#xff1a;Qwen3-ForcedAligner-0.6B时间戳精度图谱 你有没有想过&#xff0c;一段语音里的每个字、每个词&#xff0c;甚至每个音节&#xff0c;是在哪个精确的时间点被说出来的&#xff1f;这听起来像是电影后期制作里的黑科技&#xff0c;但现在&…...

编程新知 2026/4/1 4:15:50

用STM32和示波器搞定美的/格力空调红外遥控（附完整C代码）

STM32实战&#xff1a;从示波器捕获到空调红外协议逆向全解析 红外遥控技术看似简单&#xff0c;却蕴含着精妙的时序设计和协议逻辑。作为一名长期混迹于硬件开发领域的工程师&#xff0c;我经常遇到需要逆向控制家电的场景。最近在智能家居项目中&#xff0c;就遇到了需要通过…...

编程新知 2026/4/1 3:02:47

无人机开发者必看：如何基于QGC源码定制你的专属地面站？从环境搭建到第一个插件开发

无人机开发者必看&#xff1a;如何基于QGC源码定制你的专属地面站&#xff1f;从环境搭建到第一个插件开发 在无人机技术迅猛发展的今天&#xff0c;开源地面站软件QGroundControl&#xff08;QGC&#xff09;已成为行业标准工具之一。但对于追求个性化功能或特定应用场景的开发…...

编程新知 2026/4/1 2:18:02

郭老师-悟性高的人，为何不合群？

悟性高的人&#xff0c;为何不合群&#xff1f; ——他们在独处中&#xff0c;与道同行“你以为他孤独&#xff0c; 其实—— 他正与万物对话。”&#x1f33f; 不合群&#xff0c;不是缺陷&#xff0c; 而是—— 为悟性留出呼吸的空间。&#x1f9d8; 一、独处 ≠ 孤独&#x…...

编程新知 2026/4/1 1:27:23

5大核心价值重构云游戏体验：Sunshine让你的游戏突破硬件与空间限制

5大核心价值重构云游戏体验&#xff1a;Sunshine让你的游戏突破硬件与空间限制 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 在数字娱乐日益碎片化的今天&#xff0c;玩家们面临…...

编程新知 2026/4/1 0:52:18

从vector的push_back看C++的‘完美转发’：一个emplace_back如何省掉一次临时对象构造

从vector的emplace_back揭秘C完美转发的魔法 在C的世界里&#xff0c;vector作为最常用的容器之一&#xff0c;其性能优化一直是开发者关注的焦点。当我们向vector添加元素时&#xff0c;push_back和emplace_back这两个看似相似的函数&#xff0c;背后却隐藏着现代C最精妙的语言…...

编程新知 2026/3/31 22:58:45

DLSS Swapper革新性图形优化工具：一键提升游戏帧率最高达40%的开源解决方案

DLSS Swapper革新性图形优化工具&#xff1a;一键提升游戏帧率最高达40%的开源解决方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款开源的图形优化工具&#xff0c;专为游戏玩家打造&#xff0c…...

编程新知 2026/3/31 22:40:26