scrollHeight实测

最新推荐文章于 2024-06-28 17:10:12 发布
最新推荐文章于 2024-06-28 17:10:12 发布
阅读量590 收藏
点赞数
分类专栏： 前端 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_36091081/article/details/128100904
版权

scrollHeight实测

scrollHeight就是不考虑滚动条，将内容全部在页面上展开时的高度，注重要加上 padding，不包括border

– 小菜菜

即 scrollHeight = 实际内容尺寸 + padding

我们来看看在box-sizing分别是content-box 和 border-box 时，scrollHeight的值

content-box时的 scrollHeight

请添加图片描述

border-box时的scrollHeight

请添加图片描述

总结

scrollHeight = 实际内容尺寸 + padding

小菜101
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取scrollHeight问题想到的标准问题
10-30
如果没有文档声明可以用 document.body.scrollHeight,如果有文档声明必须用 document.documentElement.scrollHeight关于这方面的东西
解析offsetHeight,clientHeight,scrollHeight之间的区别
09-04
在Firefox和Chrome中，scrollHeight的最小值是clientHeight，这意味着即使内容没有填满可视区域，scrollHeight也不会小于clientHeight。然而，在IE6和IE7中，scrollHeight可能小于clientHeight，因为它只考虑实际...
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
weixin_61597234的博客
12-07 3204
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
【JavaScript】scrollTop和scrollHeight
小秀的博客
06-24 2792
scrollTop和scrollHeight
js中关于scrollHeight，scrollwidth,scrollLeft,scrollTop的属性使用
m0_56132701的博客
01-06 1968
element.scrollHeight属性返回整个元素的总高度， element.scrollWidth属性返回整个元素的总宽度。如果元素没有发生溢出（没出现滚动条），那么scrollHeight和clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。element.scrollLeft属性表示元素的水平滚动条向右侧滚动的距离，element.scrollTop属性表示元素的垂直滚动条向下滚动的距离。如果没有出现滚动条，那上面的两个属性值就是0。
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3478
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 3847
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
10-28
在JavaScript中，处理页面元素的位置和尺寸时，经常会用到几个关键属性，如`scrollHeight`、`scrollWidth`、`scrollLeft`和`scrollTop`。这些属性在不同的场景下有着各自独特的用途，理解它们之间的差异是进行网页...
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
10-15
JavaScript中的几个关键属性——scrollTop、scrollHeight、offsetTop和offsetHeight，对于网页动态效果和页面交互的实现至关重要。这些属性都是用来处理元素在视口中的位置以及可滚动内容的尺寸。 1. scrollTop属性...
clientHeight offsetHeight scrollHeight clientWidth详解
07-21
clientHeight offsetHeight scrollHeight clientWidth详解
获取HTML元素的scrollHeight属性
最新发布
微赚开发者技术分享博客
06-28 602
在HTML和JavaScript中，
scrollWidth和scrollHeight详细介绍
xiaomao_wxj的博客
06-09 334
scrollWidth和scrollHeight
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
小苏(º﹃º )的博客
10-21 2441
https://juejin.cn/post/6844903861212168200
el.scrollHeight属性的理解
yang1067155909的专栏
09-08 2122
目录 前言 一、scrollHeight是什么？ 二、没了 前言 在看iview的collaspse-transition组件实现时，发现有el.scrollHeight这个属性： enter(el) { el.dataset.oldOverflow = el.style.overflow if (el.scrollHeight !== 0) { el.style.height = el.scrollHeight + 'px' ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
我是张跑跑
01-07 1万+
1. 总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。 2. scrollWidth和scrollHeight 2.1 概念 element...
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
热门推荐
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
css clientheight、offsetheight、scrollheight详解
wangjun5159的专栏
02-07 1万+
介绍网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。 clientheightclientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。
scrollHeight,offsetHeight,clientHeight的本质区别
WEBCODE
07-16 140
scrollHeight,offsetHeight,clientHeight的本质区别 1).element.scrollHeight (只读) 总结 scrollHeight是指元素的滚动视图的高度(Height of the scroll view of an element，即有滚动条时从头部滚动到尾部的高度),它包括元素的内边距,但不包括外边距. Height of the scr...
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 4028
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
scrollheight属性
07-27
scrollHeight属性是用来表示元素内容的总高度，包括那些在视口中不可见的部分。它返回一个数字，表示元素内容的高度。通常情况下，scrollHeight大于元素的可见高度，这意味着需要滚动才能查看全部内容。\[3\] #### ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值