兼容的获取页面滚动出去的距离笔记

最新推荐文章于 2023-06-30 17:38:46 发布
最新推荐文章于 2023-06-30 17:38:46 发布
阅读量523 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yawhom/article/details/74677330
版权
本文介绍了一种兼容多种浏览器的方法来获取页面的滚动距离。通过使用不同的属性如 `document.body.scrollTop`、`document.documentElement.scrollTop` 和 `window.pageYOffset`，确保了在谷歌、IE、火狐等浏览器中都能正确获取到页面滚动出去的距离。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

兼容获取页面滚动出去的距离
    function getScrollTop() {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    }
 兼容的获取页面滚动出去的距离
    谷歌支持的方式：document.body.scrollTop
    ie和火狐支持的方式：document.documentElement.scrollTop

    高版本浏览器支持的：window.pageYOffset


 
yawhom
关注
获得滚动条的滚动距离
liuhao9999的博客
05-30 1089
function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.scrollLeft + document.documentElement.scr.
获取页面滚动过的距离
weixin_30627381的博客
01-09 1134
前提：html\body高度都超过屏幕高，普通的长页面。 $("body").scrollTop() chrome浏览器中一直是0； $("html,body").scrollTop() sume中一直是0； 最稳妥方法： $(document).scrollTop()。 转载于:https://www.cnblogs.com/wangxiaohang/p/8250529.ht...
获取滚动条距离控制页面样式
m0_62852343的博客
05-18 171
<template> <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3> </template> <script> export default { data() { return { translatechange: 'translateX(0%)' } }, methods: {...
关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
weixin_30292843的博客
01-30 158
1、各浏览器下 scrollTop的差异IE6/7/8：对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ；Safari:safari 比较特别，有自己获取scrollTop的函数 ： window.pa...
js获取浏览器滚动条垂直滚动距离scrollTop的兼容方法
kmd6174的博客
06-16 2542
window.onscroll = function(){ //谷歌下始终为0 火狐与IE8正常 var dst = document.documentElement.scrollTop; //谷歌下正常 火狐与IE8始终为0 var bst = document.body.scrollTop; console.log('document.documentElement.scr
计算滚动条距离
别提昨天的博客
06-15 1231
function getScrollTop() {               var scrollPos;               if (window.pageYOffset) {               scrollPos = window.pageYOffset; }               else if (document.compatMode && documen
css入门笔记
05-15
独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...
Android学习笔记——归纳整理
Yawn
04-21 9893
Android入门笔记——归纳总结
王佩丰 Excel 基础24讲 | 学习笔记（全）
热门推荐
happylls666的博客
02-01 3万+
excel学习笔记
JavaScript制作简单动画特效及注意问题（个人整理笔记）
Kami丶
09-22 2007
个人理解：所谓的动画，就是利用定时器，把元素的属性按某一规律变化的过程。 在函数内利用参数当css属性时，style[attr] &amp;amp;amp;lt;==&amp;amp;amp;gt; style.arr，比如arr等于border。 注意问题 IE和其他浏览器的兼容，IE的事件对象和其他浏览器的事件对象不同，IE为window.event，而其他浏览器的函数中默认有e的事件对象。 把a标签的href设置为javascript:...
【锋利的jQuery】读书笔记
Creabine的博客
02-22 3248
前两天看了极客学院的jQuery入门视频，但是感觉这套视频偏介绍，作为入门学习，还是不够，看完之后能够看懂现成的jQuery代码，但是要讲我之前写的原生JavaScript代码用jQuery重写的时候，却遇到了很多问题，所以还是准备重新系统的学习一下jQuery。 先看看这本《锋利的jQuery》，之后再快速过一遍其他的教学视频，应该能够更好的掌握，从而达到能够熟练的使用jQuery来编写网页效果的
JS获取页面滚动距离
最新发布
qq_40147756的博客
06-30 4655
获取或设置一个元素的内容垂直滚动的像素数。返回文档在垂直方向已滚动的像素值。
前端：计算滚动条距底部多远（距离底部的百分比）
weixin_50236973的博客
12-01 1028
【代码】前端：计算滚动条距底部多远（距离底部的百分比）
js获取元素的滚动高度，和距离顶部的高度
weixin_30378623的博客
06-20 682
jq： 获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ： $(document).width(); 浏览器当前窗口文档body的高度： $...
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 4368
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
获取当前页面滚动了多少距离
qq_44361433的博客
04-02 6901
window.onscroll=()=>{ console.log(document.documentElement.scrollTop); } 获取当前元素距离最顶层有多高 function getTotalTop(elem){ var sum=0; do{ sum+=elem.offsetTop; elem=elem.offsetParent; ...
获取页面滚动距离pageYOffset、scrollY、scrollTop
qq_43654065的博客
09-23 6046
在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值，并且会忽略DOCTYPE定义规则。 window.pageYOffset scrollY：属于window对象，Firefox、Chrome、Opera均支持，IE不支持，忽略DOCTYPE定义规则。 window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持
$(document).height()、$(document).scrollTop()
QDY5945的博客
11-19 755
(document).height()、$(document).scrollTop()： jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).h...
获取页面滚出去距离
gaoyan426926的博客
12-06 543
获取页面滚出去距离 ● scrollLeft和scrollTop用在一个div上的，获取的是这个盒子往左、往上滚出去的距离 ● 需求：获取整个网页内容往上滚出去的距离 ● 可以！ ● 但是，网页所有dom元素都在 html 里，所以你要获取网页内容滚出去的距离，其实就是应该获取 html 的scrollLeft 和 scrollTop ● 获取html document.documentElement ● 获取整个网页往上滚出去的距离 document.documentElement.scroll
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值