scrollTop

最新推荐文章于 2023-06-24 07:31:05 发布
最新推荐文章于 2023-06-24 07:31:05 发布
阅读量472 收藏 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 1589
在template标签下，定义一个div标签:<div class='className'></div> 定义div的样式，撑起滚动条: .className { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } 现在已经有...
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
热门推荐
weixin_65793170的博客
03-30 1万+
scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
各浏览器页面滚动值(scrollTop)的获取与设定。
juse__we的博客
01-24 3756
经典获取元素坐标图 博客目录的一个最主要的功能就是实现点击标题页面滚动，因为我们要滚动到页面某个标题，所以需要计算出滚动这个元素的具体绝对位置，而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量，此处不适用。 此处应使用浏览器原生提供的 getBoundingClientRect 接口，此函数返回的是元素距离浏览器各边距的绝对位置，跟是什么定位类型的无关，
【JavaScript】scrollTop和scrollHeight
小秀的博客
06-24 2734
scrollTop和scrollHeight
滚动条距离顶部的距离 scrollTop
小武的博客
09-12 3187
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 96
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.正则验证输入...
scrollTop 用法说明
09-06
`scrollTop` 属性是Web开发中的一个重要概念，主要用于处理元素内部的垂直滚动。它主要应用于JavaScript，用于获取或设置一个元素内部的垂直滚动位置。在HTML文档中，当元素内部内容的高度超过元素自身的高度，就会...
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
javascript中scrollTop详解
10-24
本文主要给大家介绍了javascript中的scrollTop方法，以及scrollTop在各大浏览器的兼容性情况的详细测试，十分的细致全面，这里推荐给大家，有需要的小伙伴可以参考下。
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue使用list动态加载数据滚动条自动滚动到底部，用户手动滚动则取消
qq_40567849的博客
05-25 2449
场景： 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 3387
获取页面可视高度 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 3960
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
深入【虚拟列表】动态高度、缓冲、异步加载... Vue实现
郊眠寺
02-15 1976
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享) **如果实在要处理图片不定高的场景**，只有在列表中的图片完全加载后再重新更新`positions`了，利用`Image.onload`或`DOM.resizeObserver`在异步加载后回调滚动函数。我试了下应该都是可行的。
vue中的scrollTop获取
weixin_43743956的博客
01-05 6783
在项目中，有一个需求是，下拉一段距离后，头部的背景有相应渐变。 那就来监听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 2411
// 获取元素 let div = document.getElementsByClassName('goods_detail')[0] // 获取scrollTop let div_scrolltop = div.offsetTop
钉钉 scrollTop
最新发布
09-02
在钉钉中获取scrollTop的值与不同浏览器有关。在IE6/7/8下，对于没有doctype声明的页面可以使用document.body.scrollTop来获取scrollTop的高度，对于有doctype声明的页面可以使用document.documentElement.scrollTop来获取。在Safari浏览器中，可以使用window.pageYOffset来获取scrollTop的值。而在Firefox等相对标准的浏览器中，可以直接使用document.documentElement.scrollTop来获取scrollTop的值。所以，为了完美地获取scrollTop的值，可以使用以下代码： var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 在开发过程中，如果无论是使用原生的scrollTop还是JQ的scrollTop获取到的值始终为0，很可能是因为DOCTYPE的问题。在DOCTYPE声明为<!DOCTYPE html>的情况下，获取scrollTop的值始终为0，而在DOCTYPE声明为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">的情况下，可以正常获取scrollTop的值。 在滑动的过程中，可以根据event.touches.clientY <= 导航栏的高度来判断是否滚动到底部。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [获取不到scrollTop的问题](https://blog.csdn.net/weixin_34006468/article/details/88744865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [仿钉钉左右滑动日历](https://blog.csdn.net/weixin_39963255/article/details/117737339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值