获取页面滚出去距离

最新推荐文章于 2024-05-04 14:55:11 发布
最新推荐文章于 2024-05-04 14:55:11 发布
阅读量479 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoyan426926/article/details/121744347
版权

获取页面滚出去距离

● scrollLeft和scrollTop用在一个div上的，获取的是这个盒子往左、往上滚出去的距离
● 需求：获取整个网页内容往上滚出去的距离
● 可以！
● 但是，网页所有dom元素都在 html 里，所以你要获取网页内容滚出去的距离，其实就是应该获取 html 的scrollLeft 和 scrollTop
● 获取html

document.documentElement

● 获取整个网页往上滚出去的距离

document.documentElement.scrollTop
高高baby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取滚动距离的方法
12-12
本文实例讲述了js获取滚动距离的方法。分享给大家供大家参考。具体实现方法如下： /** / THIRD FUNCTION * getPageScroll() by quirksmode.com * * @return Array Return an array with x,y page scroll values. */ function ___getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.
JS获取页面滚动距离
qq_40147756的博客
06-30 3778
获取或设置一个元素的内容垂直滚动的像素数。返回文档在垂直方向已滚动的像素值。
获取页面滚动距离pageYOffset、scrollY、scrollTop
qq_43654065的博客
09-23 5697
在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值，并且会忽略DOCTYPE定义规则。 window.pageYOffset scrollY：属于window对象，Firefox、Chrome、Opera均支持，IE不支持，忽略DOCTYPE定义规则。 window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持
JS-获取网页滑动距离，并实时监听
热门推荐
weixin_43937466的博客
09-05 1万+
本文主要介绍通过JS获取网页滑动距离，并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。
盒子的距离以及滚动条之类的
11-19 334
getComputedStyle(obj).attr 带单位 只能获取指定的样式，计算后的样式。不支持padding 在获取left，top...位置的时候，必须设置一个默认值 clientWidth/clientHeight 支持padding 不带单位，number类型的，不支持border ...
js图片滚动插件支持单排图片上下滚动、图片无缝滚动
11-17
这种方式使得有限的网页空间可以展示更多的图片信息，同时保持页面布局的整洁。在JavaScript中实现这个功能，通常会用到数组来存储图片URL，然后使用定时器和事件监听器来控制图片的切换。 无缝滚动则是指当最后...
jquery 网页浮动右下角侧边栏
10-29
在网页设计中，浮动元素是一种常见的布局技巧，用于创建多列布局或使元素在页面上保持固定位置。jQuery 是一个广泛使用的 JavaScript 库，它简化了JavaScript编程，提供了丰富的功能和简便的操作方式。当我们谈到...
jquery easyui滚动条部分设置介绍
10-26
在jQuery EasyUI框架中，创建的对话框（dialog）通常会自动居中显示在屏幕上，但这仅限于...这种方法对于那些需要频繁使用对话框并且页面内容较长的应用尤其有用，它使得用户无需滚动回顶部或寻找被滚动出去的对话框。
【JavaScript源代码】JavaScript实现返回顶部按钮.docx
12-29
// 获取滚动出去的距离 let offsetY = getPageScroll().y; // 判断是否需要显示回滚按钮 if (offsetY >= 200) { oBackBtn.style.display = "block"; } else { oBackBtn.style.display = "none"; } } let...
表头固定插件StickyTableHeaders.zip
07-19
例如，你可以设置固定表头的偏移距离，或者调整固定表头的Z-index，以确保其在页面上的层级正确。此外，插件还支持响应式设计，可以在不同设备和屏幕尺寸上自动调整表头的固定方式。 在实际项目中，...
原生js获取页面滚动的距离scrollLeft、scrollTop
u010234868的专栏
07-05 5356
<!-- <!doctype html> --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 1000px; } </style> </head> <body> <script> // e.p.
这是一篇关于获取页面的各种距离总结
a_xia_o的博客
08-15 331
与 clientHeight 和 clientWidth 相比，我想这对属性用的更多一点，因为更多的时候我们需要获取的是元素的完整宽高。offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。分别返回元素的高度和宽度，包括元素本身的高和宽、padding 和 border ，以及滚动条的高和宽。
元素的盒子模型+标签的尺寸大小和偏移量+获取页面滚动距离+让页面滚动到指定位置+ 获取浏览器窗口的宽高
weixin_47075145的博客
08-09 659
随着人往下拉(滚动条向下滑)而慢慢减小,但是经过滑轮的绳子变长(经过滑轮的绳子：页面滚动距离document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset)人拉滑轮调重物的过程：整个绳子长度没有变化就是：offsetTop，重物(元素)距离滑轮(上边界) 的距离(元素.offsetWidth 和 元素.offsetHeight。元素.offsetTop 和 元素.offsetLeft。........
JS高级使用3.0——JS中获取页面的高度、距离顶部的距离
最新发布
蓝桉
05-04 1732
获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()
细说滚动问题，附带获取各种距离，宽高的API
weixin_34409822的博客
07-06 196
在写动画等操作的时候，滚动问题是我们常见的问题， 一. 对于页面级别的滚动，也就是整个document，如果它的高度小于屏幕的高度，那么滚动就不会发生，如果document的高度大于屏幕的高度，这个时候我们就可以滚动页面了，此时正在滚动的是document，window是作为包含着document的外壳，如果我们想获取滚动距离，那我们就有下面两种方式： window.scrollX docume...
获取当前页面滚动了多少距离
qq_44361433的博客
04-02 6758
window.onscroll=()=>{ console.log(document.documentElement.scrollTop); } 获取当前元素距离最顶层有多高 function getTotalTop(elem){ var sum=0; do{ sum+=elem.offsetTop; elem=elem.offsetParent; ...
HTML中各种 div 位置距离关系
qq_41913971的博客
11-18 8348
HTML中各种 div 位置距离关系一. 盒模型图片展示：二. 位置距离计算属性三. 经典例子 一. 盒模型图片展示： 二. 位置距离计算属性 offsetWidth, offsetHeight 获取盒子的宽度/高度（包括盒子的border，padding和内容width/height）,不包括外边距 offsetLeft 获取盒子当前位置(左上角)距离自己最近定位的父元素左侧的距离，如果没有最近的定位的父元素，则相当于HTML offsetTop 获取盒子当前位置距离自己最近定位的父元素顶部
JavaScript实现获取网页滚动距离
小白小白从不日别的博客
11-05 997
1.先搭架子： * { margin: 0; padding: 0; } p { line-height: 50px; width: 200%; } <p>我是正文1</p> <p>我是正文2</p> <p>我是正文3</p>
scrollTop, scrollLeft 滚动条距离
WDS的博客
04-06 1590
滚动条滚动距离 `document.documentElement.scrollTop // ie, ff document.body.scrollTop; //chrome 兼容处理var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;一个
vue监听页面滚动及滚去距离
09-09
在Vue中监听页面的滚动事件及滚动距离可以通过使用`@scroll`事件来实现。 首先，在需要监听滚动事件的组件中，可以在`mounted`的生命周期钩子函数中添加滚动事件的监听： ``` mounted() { window.addEventListener('scroll', this.handleScroll); }, ``` 接着，定义一个`handleScroll`方法来处理滚动事件，并获取滚动距离： ``` methods: { handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 可以通过scrollTop来获取当前滚动的距离 } } ``` 在获得了滚动距离后，你可以根据需要来做一些操作，比如根据滚动位置来控制某个元素的显示或隐藏，或者加载更多的内容等等。 同时，为了避免内存泄漏，确保在组件销毁之前移除滚动事件的监听： ``` beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); }, ``` 以上是通过监听`window`对象的滚动事件实现监听页面滚动及获取滚动距离的方法。当然，如果你只是想监听某个具体的DOM元素的滚动事件，可以将事件添加到对应的DOM元素上，并使用该DOM元素的相关属性来获取滚动距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值