兼容:获取浏览器滚动位置

最新推荐文章于 2021-06-28 14:48:49 发布
最新推荐文章于 2021-06-28 14:48:49 发布
阅读量272 收藏
点赞数
原文链接：https://juejin.im/post/5c81dc24f265da2ddc3ca83f
版权

1.各浏览器获取滚动位置的方法:

  • Chrome：document.body.scrollTop(scrollLeft)

  • IE6/7/8：document.documentElement.scrollTop(scrollLeft)

  • IE9及以上和Firefox：window.pageYOffset(pageXOffset)或者document.documentElement.scrollTop(scrollLeft)

  • safari： window.pageYOffset(pageXOffset)或者document.body.scrollTop(scrollLeft)；

顺便一记：（获取鼠标的所在坐标）

  • X=event.pageX || event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft) - canvas.offsetLeft;

  • Y= (event.pageY || event.clientY + document.body.scrollTop +document.documentElement.scrollTop) - canvas.offsetTop;

2.基于以上所提到的，触摸事件获取坐标也同理

  • var touchEvnet = event.changedTouches[0];

  • X = (touchEvent.pageX || touchEvent.clientX + document.body.scrollLeft+ document.documentElement.scrollLeft );

  • Y= (touchEvent.pageY || touchEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop );

转载于:https://juejin.im/post/5c81dc24f265da2ddc3ca83f

weixin_34075268
关注
JS获取浏览器滚动条位置实例代码
佰草伐
11-26 593
```typescript $(function(){ //获取 demo2 离页面顶部距离 var demo2=$(".demo2").offset().top; //当页面滚动条变化时，执行的函数 $(window).scroll( function(){ //滚动条离页面最上方的距离 var body=document.body.scrollTop; //判断滚动条位置执行相关操作 if((demo2 - body) <= 600){ $(".demo.
获取html滚动条位置,JavaScript 获取滚动条位置并将页面滑动到锚点
weixin_27923353的博客
06-05 1028
前言这篇来记录下最近工作中遇到的一个问题，在app原生和前端h5混合开发的过程中，其中一个页面是选择城市列表的页面，类似于美团饿了么城市选择，银行app中银行列表选择，通讯录中快速定位到联系人选择的锚点位置等这样的功能，作为刚入门不久的我来说，感觉这个功能还是有一点压力。下面我来分享一下我所查到的一些实现方法。什么是锚点问题对于pc端网页来说，常见的网页右侧的回到顶部按钮，点击直接跳转到网页最上面...
获取滚动条位置
心若向阳 无谓悲伤
06-28 7385
浏览器获取滚动条位置一、各浏览器下 scrollTop的差异(1)、IE6/7/8：(2)、IE9及以上：(3)、Safari(苹果公司研发的网络浏览器):(4)、Firefox(火狐):(5)、Chrome(谷歌)：二、获取滚动条纵向位置的值（1）、可以使用window.pageYoffset（2）、同时只会有一个值生效特性（3）、准确的获取scrollTop的值 一、各浏览器下 scrollTop的差异 先来了解下各浏览器获取滚动条坐标的差别 (1)、IE6/7/8： 可以使用 document.doc
获取主流浏览器滚动条的位置
Asa的专栏
06-12 561
function getScrollOffset(w){          //使用指定窗口，不指定用当前窗口          w=w||window;          //除IE8及之前的浏览器          if(w.pageXOffset!=null) return  {x:w.pageXOffset,y:w.pageYOffset};          //标准
获取滚动条位置的通用方法--兼容ie6，ie7，firefox2，firefox3，chrome等
简单爱你所爱、世界也变得大了起来
12-05 485
获取滚动条位置的通用方法--兼容ie6，ie7，firefox2，firefox3，chrome等    代码如下：                var scTop;             if (typeof window.pageYOffset != 'undefined') {             scTop = window.pageYOffset;
获取滚动条位置（兼容）
Jx_Ubiquity的博客
11-13 446
兼容性获取滚动条位置 //滚动条位置 function GetPageScroll()  {      var x, y; if(window.pageYOffset)      {    // all except IE             y = window.pageYOffset;             x = window.pageXOffset;      } e...
Javascript 获取滚动条位置等信息的函数
10-29
考虑到浏览器兼容性，我们可以编写一个跨浏览器的函数来获取滚动条位置，就像文章中给出的`getScroll()`函数一样。这个函数首先尝试获取`document.documentElement`的滚动值，如果不行，则退而求其次尝试获取`...
jQuery实现浮动层随浏览器滚动条滚动的方法
10-23
总结来说，通过上述步骤，我们可以利用jQuery实现一个浮动层随浏览器滚动条滚动的效果，并确保浮动层在滚动到页面底部时依然能够保持在合适的位置。这种方法的实现需要对jQuery的选择器和事件处理机制有一定的理解，...
JS获取鼠标位置距浏览器窗口距离的方法示例
10-20
在JavaScript中，获取鼠标位置距浏览器窗口距离是一项常见的需求，尤其是在实现交互式网页功能时。本示例将详细介绍如何通过JavaScript获取这一信息，并提供了一个实际的代码示例，同时解释了不同浏览器之间的兼容性...
js 获取屏幕各种宽高的方法(浏览器兼容)
10-27
JavaScript为此提供了丰富的接口，但不同的浏览器对这些接口的支持度有所差异，这就要求开发者编写兼容多种浏览器的代码。 首先，获取屏幕分辨率相关的宽高属性主要有： - `window.screen.height`：获取屏幕分辨率...
获取浏览器滚动条位置，兼容所有浏览器！
虫_X的学习经历分享
01-12 870
//获取浏览器滚动条位置，兼容所有浏览器！ >var top = (typeof window.pageYOffset != 'undefined'?window.pageYOffset:typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'?document.documentElement.
获取页面的滚动位置与鼠标事件中的坐标
牧童
09-06 949
[code="js"] /** 获取当前滚动的位置。 */ function getScrollingPosition() { var position = [0, 0]; //FF if (typeof window.pageYOffset != 'undefined') { position = [ window.pageXOffset, ...
获取滚动条位置documentElement.scrollTop和body.scrollTo
lbknxy的专栏
05-04 3597
获取滚动条位置documentElement.scrollTop和body.scrollTo 以及||符号的作用
获取滚动条当前位置
zhouxukun123的专栏
09-30 7700
获取滚动条当前位置 scrollTop() 方法
获取页面滚动位置或某元素的位置
reallyafei的专栏
07-02 1027
一、获取页面滚动位置 function GetPageSize() {   var scrW, scrH;   if(window.innerHeight &amp;&amp; window.scrollMaxY) {     // Mozilla     scrW = window.innerWidth + window.scrollMaxX;     scrH = windo...
简单盘点浏览器的几种滚动行为(笔记 亲测有效)
jjsnc
03-12 1321
让页面或元素的滚动如丝般柔滑 scroll-behavior: smooth | auto; // 实现 html, body { scroll-behavior: smooth; } 二， .scroll()、 .scrollTo()、 .scrollBy()、 .scrollIntoView() scroll(x, y)、 scrollTo(x, y)、 scrollBy(x, y)标...
jq和js滑动条到顶部距离获取
qq_34187029的博客
10-14 876
jquery 获取滚动条高度      获取浏览器显示区域的高度 ：    $(window).height();    获取浏览器显示区域的宽度 ：      $(window).width();    获取页面的文档高度 ：   $(document).height();    获取页面的文档宽度 ：$(document).width();      获取滚动条到顶部的垂
JavaScript全面解析：获取浏览器窗口和元素尺寸
"这篇文章主要介绍了如何使用JavaScript获取浏览器窗口的各种尺寸信息，包括宽度、高度以及滚动条相关的属性。" 在JavaScript中，获取浏览器窗口的大小是开发者经常需要进行的操作，这些信息对于页面布局和交互设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值