元素scroll属性

最新推荐文章于 2024-03-19 15:24:14 发布
最新推荐文章于 2024-03-19 15:24:14 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42376204/article/details/104954448
版权

在这里插入图片描述
这个和client与offset的区别：

  • offset：包含padding和边框
  • scroll：不包含padding，不包含边框
  • client：不包含边框，包含padding
    但是scroll包含了超出盒子的大小，所以又叫做滚动！而client最多就是盒子加padding的大小

在这里插入图片描述
超出边框的大小就是scrollTop
在这里插入图片描述
利用scrollTop我们可以做一个到一定时候出现回到顶部案例

在这里插入图片描述

狗焕sama
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WebAPI-scroll系列属性
weixin_44486539的博客
12-08 799
scroll 就是滚动的意思，使用 scroll 系列的相关属性可以动态的得到元素的内容大小、滚动距离等。 scrollWidth element.scrollWidth 获取元素元素内容的宽度，是个只读属性，包括 overflow 溢出而在屏幕上不可见的内容。 scrollHeight element.scrollHeight 获取元素元素内容的高度，是个只读属性，包括溢出的内容 overflo...
页面DOM元素的scroll与offset相关属性
左岸
10-01 1759
1.offsetParent元素的offsetParent属性是距离该元素最近的一个具有定位的父辈元素，如果没有符合条件的父辈元素，那么body就是它的offsetParent。2.offsetWidth与offsetHeightoffsetWidth=width+横向padding值+横向border值+[横向滚动条width] 实际上，就是元素渲染到页面后的实际宽度尺寸，是否包含横向滚动条的宽
元素scroll系列属性
xy_is_fhh的博客
11-15 721
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 20px; .
元素 scroll 系列属性
qq_42931285的博客
04-06 296
注意:scrollHeight是实际的高度。scrollTop是被卷起的高度。 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。 ...
JS - scroll属性
堇年
10-05 2437
scrollWidth / scrollHeight 内容没有超出元素范围时 scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth; scrollHeight: = 元素高度 + 内边距的高度 == clientHeight; 内容超出元素范围时 scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度 scrollHeight: = 元素高度 + 内...
Vue.directive 实现元素scroll逻辑复用
12-13
2. 子元素的高度大于父元素的高度，并且父元素设置了 `overflow: scroll` 或 `overflow: auto`，这样才会出现滚动条。 关键属性有 `Element.scrollHeight` 和 `Element.scrollTop`。`scrollHeight` 是一个只读属性...
scroll-animation:根据滚动位置对元素进行动画处理
04-28
我找不到适合我需要的npm软件包： 动画任何DOM属性的能力使用进行表演暂时挂起以最大程度地减少负载没有data-属性或特殊标签正在安装npm install scroll-animation用法const animate = require ( 'scroll-animation...
unity Scroll 滑动 缩放
08-14
4. **Interactable** 和 **Scrollbar**：确保Scroll Rect的Interactable属性设置为True，以便接收用户输入。如果需要，还可以添加Scrollbar组件以提供可视化的滚动条，增强用户体验。 在实际项目中，可能还需要考虑...
javascript中offset、client、scroll的属性总结
12-12
JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素...在JavaScript中处理元素尺寸和位置时，了解并正确使用offset、client和scroll属性至关重要，它们可以帮助我们创建更加动态和响应式的网页界面。
元素滚动scroll
醉意在诗里的博客
07-22 77
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏 掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件。scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
元素滚动 scroll 系列
十八岁讨厌编程的博客
03-31 1173
文章目录元素 scroll 系列属性页面被卷去的头部案例：淘宝固定右侧侧边栏页面被卷去的头部兼容性解决方案 元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件 我们可以拿以下代码进行实验： <style
元素可视区client系列+元素滚动scroll系列属性
phoebemeng的博客
07-18 121
元素可视区client系列+元素滚动scroll系列属性 +淘宝固定侧边栏案例
JS11-scroll相关属性和缓动动画
最新发布
colorsZeroz的博客
03-19 1066
scroll 相关属性、window.onscroll() 方法
如何使用scroll的相关属性?
zy1992As的博客
06-28 529
通过使用scrollTop和scrollLeft等属性，我们可以根据滚动的位置和元素的大小来实现各种滚动效果和交互。请注意，这些属性和方法可以应用于适当支持滚动的元素(例如具有固定高度和溢出属性的容器)。例如，如果一个元素的内容比可见区域高，当用户向下滚动时，scrollTop的值将逐渐增加。与scrollTop类似，只是方向不同。3.'scrollHeight'：获取元素内容的总高度，包括由于溢出而无法显示的部分。4.'scrollWidth'：获取元素内容的总宽度，包括由于溢出而无法显示的部分。
前端学习（928）：元素scroll系列
歌谣的博客
04-22 441
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume...
前端学习笔记-JS-BOM-元素可视区client系列/立即执行函数/元素滚动scroll系列
qq_36434637的博客
09-19 182
client client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 立即执行函数 不需要调用，立马能够自己执行的函数 主要作用：创建一个独立的作用域。避免了命名冲突问题 写法一：(function(){})() 写法二：(function(){}()) ...
元素滚动scroll、动画函数封装
smile__w的博客
11-27 129
scroll、动画函数
元素滚动 scroll系列
makemoreefforts的博客
03-17 153
scroll 系列 <style> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; /* 添加滚动条 */ overflow: auto; }
关于Scroll的CSS属性--修改滚动条样式
qq_30258721的博客
11-16 2646
关于Scroll的CSS属性--修改滚动条样式
scroll-view属性
10-12
5. scroll-into-view：滚动到指定id的元素。 6. scroll-with-animation：在滚动时是否使用动画效果，默认为false。 7. enable-back-to-top：是否允许快速返回顶部，默认为false。 8. bindscrolltoupper：滚动到顶部...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值