一、获取页面滚动位置
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY) {
// Mozilla
scrW = window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight + window.scrollMaxY;
} else if(document.body.scrollHeight > document.body.offsetHeight){
// all but IE Mac
scrW = document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body) { // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight) { // all except IE
winW = window.innerWidth;
winH = window.innerHeight;
} else if (document.documentElement
&& document.documentElement.clientHeight) {
// IE 6 Strict Mode
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
// for small pages with total size less then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH = (scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
}
function GetPageScroll() {
var x, y;
if(window.pageYOffset) {alert(1);
// all except IE
y = window.pageYOffset;
x = window.pageXOffset;
} else if(document.documentElement
&& document.documentElement.scrollTop) {alert(2);
// IE 6 Strict
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) {alert(3);
// all other IE
y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
二、获取页面元素的位置
function gETop(x){var t=0;while(x){t+=x.offsetTop;x=x.offsetParent;}return t;}
function gEBottom(x){return (x.offsetHeight+gETop(x));}
function gELeft(x){var l=0;while(x){l+=x.offsetLeft;x=x.offsetParent;}return l;}
分享到:
相关推荐
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容,然后配置好page.json。就可以直接查看效果。
使用原生js获取浏览器可是高度,滚动条高度,监听滚动条,滑动时 触发 改变导航元素位置,和子元素样式,适合新手参考借鉴!
主要是对JS和JQUERY获取页面大小,滚动条位置,元素位置的示例代码进行了介绍。需要的朋友可以过来参考下,希望对大家有所帮助
6、jQ+CSS3页面滚动内容元素动画特效
主要介绍了JQuery获取元素尺寸、位置及页面滚动事件应用,结合实例形式分析了jQuery针对页面元素动态操作相关实现技巧,并给出了购物车动画效果案例进行总结,需要的朋友可以参考下
因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅,并且兼容的解决... 获取滚动条的位置 代码如下: //获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获
实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果 HTML正文: <form id="form1" runat="server"> </form> Javascript操作代码: $(document).ready(function() { $(window)....
本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧。 本文会详述各种获取 DOM 元素绝对...
本篇文章主要介绍了解决Vue固定滚动位置的处理办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
2.最近遇到自定义弹窗滚动问题,当文本页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,想要自定义弹窗滚动却触发的是页面的滚动。 解决思路:在打开弹窗的时候,让页面不可滚动;关闭弹窗后,恢
(如有Ajax动态加载分页的网站,需要配合页面动作,直到页面加载完成,如:滚动条操作) 2、加载完成后获取webBrowser.Document (配合使用webBrowser_DocumentCompleted和Application.DoEvents()) 3、解析网页内容
主要介绍了vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起...
博客目录的一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不...
下面的教程总结了Javascript在网页...很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的绝对大小和相对大小是相等的。 二、获取网页的相对大小 网页上的每个元素,都有clientHeigh
该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
随着页面滚动,标题栏颜色变化 ... // 获取滚动停止位置的元素 var bannerHeight = banner.offsetHeight; // 获取滚动停止位置的元素据top的高度 var header = document.querySelector('.header'); // 获取头部 /