前端中的scrollHeight 、scrollTop、clientHeight等意思

最新推荐文章于 2024-04-21 10:32:51 发布
最新推荐文章于 2024-04-21 10:32:51 发布
阅读量3.8k 收藏 6
点赞数 1
分类专栏： HTML es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjw_zyfx/article/details/102712858
版权
前端 同时被 3 个专栏收录
296 篇文章 0 订阅
订阅专栏
es6
37 篇文章 0 订阅
订阅专栏
HTML
34 篇文章 0 订阅
订阅专栏

要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth

完成这个动作需要先知道三个高度：

scrollHeight    文档内容实际高度，包括超出视窗的溢出部分

scrollTop   滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离

clientHeight  窗口可视范围高度（就是自己能看到的高度，如果这个盒子都在可视区内容则是盒子的高度）

可参考：https://blog.csdn.net/qq_35430000/article/details/80277587 

jjw_zyfx
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
根据例子来理解scrollHeight,clientHeight,scrollTop的区别
01-14
包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
01-19
clientHeight，只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)...
秒懂scrollWidth/scrollHeight/scrollLeft/scrollTop（详解）
weixin_61597234的博客
12-07 3025
1.scrollWidth：返回元素整体的宽度，包括由于 overflow 溢出而在屏幕上不可见的内容。 2.scrollHeight：返回元素整体的高度，包括由于 overflow 溢出而在屏幕上不可见的内容。 3.scrollLeft：被隐藏在内容区域左方的距离。设置该值可以改变元素的滚动位置 4.scrollTop：被隐藏在内容区域上方的像距离。设置该值可以改变元素的滚动位置
【JavaScript】scrollTop和scrollHeight
小秀的博客
06-24 2756
scrollTop和scrollHeight
前端学习＜四＞JavaScript基础——39-scroll相关属性和缓动动画
最新发布
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
04-21 995
当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）如果你需要做滚动监听，可以使用这个方法。我们来看看和 scroll 相关的有哪些属性。 和 ：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。注意： 的特点是：如果内容超出了盒子，为内容的高（包括超出的内容）；如果不超出，为盒子本身的高度。同理。  <!DOCTYPE html>  <html&g
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3427
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
scrollWidth和scrollHeight详细介绍
xiaomao_wxj的博客
06-09 331
scrollWidth和scrollHeight
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 3989
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些： 尺寸相关：offsetHeight、clientHeight、scrollHeight...
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...
前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
前端下午茶
08-19 771
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） st
【JS中scrollHeight/Width详解（不加定位的情况下）】
Linxuejie_1030的博客
01-20 1393
JS中scrollHeight（不加定位的情况下）超详细说明！
js中 scrollHeight、clientHeight、scrollTop的理解
weixin_42371812的博客
09-03 716
滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客 【https://blog.csdn.net/weixin_42371812/article/details/126450708】前段时间，自己手写了一个滚动触底加载数据的功能。今天有空，所以自己特意去研究了下它的原理。所谓的懒加载，就是在页面上先用一个静态的图片做一个占位符，等滚动那个图片位置的时候，再从后端请求数据，把真实的图片放到页面上。那么，这儿，我也就只说下我的大概思路，说的不好请大家在评论区里指出来。
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
热门推荐
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
关于scrollTop和scrollHeight那点事儿（调研）
zerojunyan的专栏
04-26 3102
1、scrollTop （1）设置scrollTop          FF、IE8        使用document.documentElement.scrollTop = 100;         chrome         使用document.body.scrollTop = 100; （2）取值          scrollTop = document.documentE
scrollHeight, clientHeight, offsetHeight的区别
大赚万万亿
11-06 356
浏览器窗口和网页文档 先明确浏览器窗口和网页文档的区别，拿下面这张图来说 右边那张图中，大红色方框框起来的是浏览器窗口，而网页文档就是左边这张图。先不用去管scrollHeight这些东西，后面再解释。 先明确浏览器窗口和网页文档是不同的！！不用去纠结它们什么时候高度相等，明白这两个代表的含义才是最重要的。 浏览器窗口 宽：window.innerWidth 高：window.innerHeight 一些注意点： 无论是否出现滚动条，这两个值都是不变的。 当调整浏览器大小时，这两个...
jq 取 scrollHeight值
前端小狮的博客
07-05 1万+
jq 取 scrollHeight, $("#tendersList").scrollHeight 拿不到 $("#tendersList")[0].scrollHeight //取值scrollHeight $scope.initScroll = function ($last) { if ($last){ console.log($("#tendersList").height()...
scrollHeight的分析
weixin_34146410的博客
02-21 637
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&...
scrollheight与scrolltop相等时滚动条没有置底如何解决？
06-10
当`scrollHeight`与`scrollTop`相等时，可以通过以下方法来确保滚动条置底： 1. 设置`scrollTop`的值为`scrollHeight`与`clientHeight`的差值，即`element.scrollTop = element.scrollHeight - element.clientHeight`。 2. 使用`element.scrollIntoView()`方法，将指定的元素滚动到可视区域内，从而使得滚动条置底。 3. 如果需要动态调整滚动条高度，可以监听内容高度变化事件，然后重新计算滚动条高度，并设置`scrollTop`的值为`scrollHeight`与`clientHeight`的差值。 需要注意的是，在使用`scrollIntoView()`方法时，可能会出现滚动条“抖动”的情况，因为该方法会不断调整滚动条位置，直到将指定元素滚动到可视区域内。如果要避免这种情况，可以使用第一种方法或者将`scrollIntoView()`方法包裹在`setTimeout()`函数中，以便让浏览器先绘制一次，再进行滚动操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值