scrollTop

最新推荐文章于 2023-06-24 07:31:05 发布
最新推荐文章于 2023-06-24 07:31:05 发布
阅读量486 收藏 1
点赞数 1
分类专栏： css 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56815226/article/details/127395247
版权

d.scrollTop + d.offsetHeight >= d.scrollHeight

scrollTop：代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

clientHeight：视野可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距；

offsetHeight：在clientHeight的基础上， 加上边框和滚动条的高度；

scrollHeight：所有的内容(包括肉眼看不见、溢出、被窗口遮挡的部分；

酱酱酱酱将
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue滚动条监听，定位，回到顶部
weixin_42702731的博客
01-13 1596
在template标签下，定义一个div标签:<div class='className'></div> 定义div的样式，撑起滚动条: .className { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } 现在已经有...
深入【虚拟列表】动态高度、缓冲、异步加载... Vue实现
郊眠寺
02-15 2012
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享) **如果实在要处理图片不定高的场景**，只有在列表中的图片完全加载后再重新更新`positions`了，利用`Image.onload`或`DOM.resizeObserver`在异步加载后回调滚动函数。我试了下应该都是可行的。
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
各浏览器页面滚动值(scrollTop)的获取与设定。
juse__we的博客
01-24 3766
经典获取元素坐标图 博客目录的一个最主要的功能就是实现点击标题页面滚动，因为我们要滚动到页面某个标题，所以需要计算出滚动这个元素的具体绝对位置，而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量，此处不适用。 此处应使用浏览器原生提供的 getBoundingClientRect 接口，此函数返回的是元素距离浏览器各边距的绝对位置，跟是什么定位类型的无关，
【JavaScript】scrollTop和scrollHeight
小秀的博客
06-24 2787
scrollTop和scrollHeight
滚动条距离顶部的距离 scrollTop
小武的博客
09-12 3197
header是你加滚动scroll设置的那个div center+num是li ul 种的id，本文实现功能是滚动位置大于0，把菜单悬空给解决掉，所以margin-top改为-100 if(document.getElementById("header").scrollTop>0){ document.getElementById("center"+num).style.m...
2021-02-23
jingdala的博客
02-23 100
uniapp遇到的问题总结： 1.scroll-view 滚动时不断计算scrolltop，并赋值给scroll-top属性，会导致滚动抖动，toview改变之后需重置 2.flex布局多行自适应布局，可以：1.添加 伪元素，2.操作dom，先定义无内容的空元素 1: .container::after{content: '';width：300px;} 2: div:empty{ height: 0; width:160px; border:none; } 3.正则验证输入...
vue使用list动态加载数据滚动条自动滚动到底部，用户手动滚动则取消
qq_40567849的博客
05-25 2487
场景： list中的数据是动态的，每次保证滚动条能自动滚动到最底部，查看最新的一条记录。 如果用户手动操作滚动条如拖动或鼠标滚轮滑动，则取消自动滚动。 解决方案 一、使用scrollTop =scrollHeight 1.使用scrollTop 时，容器必须要有height并且overflow为auto或scroll <div class="container"> .container { height: 100%; overflow: scroll; } 2.借助vue生
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3471
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 4024
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
vue中的scrollTop获取
weixin_43743956的博客
01-05 6792
在项目中，有一个需求是，下拉一段距离后，头部的背景有相应渐变。 那就来监听scroll事件就好了。 mounted(){ let _this=this window.addEventListener('scroll',function(){ let top = document.documentElement.scrollTop || document.body.scr...
关于jquery获取元素高度、height、scrollTop等问题，更新。。。
十年树木的博客
04-14 1万+
1、是看这边资料的：http://www.365mini.com/page/jquery-scrolltop.htm 当一个区域设置了over-flow-y：scroll，选择的li不在可视区，怎么样让页面初始化时展示这个li呢？ 效果图： 怎么做呢？我写的js代码： //如果当前选择的法院不再可视区，滚动滚动条使其可见 function show_scrollTop(){
vue 获取元素距离页面顶部的偏移值
weixin_45173576的博客
09-08 2425
// 获取元素 let div = document.getElementsByClassName('goods_detail')[0] // 获取scrollTop let div_scrolltop = div.offsetTop
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
semanwmj的专栏
12-15 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文
scrollTop、offsetTop、offsetHeight等相对位置介绍
lyqhn2012的专栏
04-27 723
scrollTop 滚动条相对于其顶部的偏移 offsetTop 返回当前元素上边缘距离offsetParent元素的距离，返回值是数字，单位是像素。 offsetHeight 返回当前元素的高度，包括内边距和边框 event.clientX，event.clientY 相对于浏览器窗口的(x,,y)坐标，不包括工具栏和滚动条 event.pageX， event.pageY 相对于文档的(x,,
js获取屏幕高度
不忘编码
05-07 6018
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 vue使用 document.documentElement.clientHeight/window.innerHeight ...
滚动分页获取数据
普罗旺斯的梦
03-23 128
const [rdPageNum, setRdPageNum] = useState(1); <Card list={rdList} loading={rdLoading} hasMore={rdHasMore} total={countData.rd} scrollEv={() => { dispatch({ type: '...
javaScript:获取页面滚动距离的元素.scrollTop和元素.scrollLeft获取的兼容性处理（IE、Chrome 、 FireFox、Safari）
小福气的博客
07-07 328
注：火狐用window.pageYoffset <button>点击</button> <script> vartop1 window.onscroll=function(){ //获取滚动距离：兼容 top1=document.documentElement.scrollTop||document.body.scrollTop console...
钉钉 scrollTop
最新发布
09-02
在IE6/7/8下，对于没有doctype声明的页面可以使用document.body.scrollTop来获取scrollTop的高度，对于有doctype声明的页面可以使用document.documentElement.scrollTop来获取。在Safari浏览器中，可以使用window....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值