一、获取页面滚动位置
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;}
分享到:
相关推荐
我们使用 `ref` 属性来获取滚动条组件的引用,然后使用 `setScrollLeft` 方法来设置滚动条的滚动位置。 实现细节 在这个例子中,我们使用 Vue.js 的 Composition API 来实现滚动条的功能。我们首先定义了一个 `...
在前端开发中,获取元素的绝对位置是一个常见的需求,它涉及到网页布局和交互设计。"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,...
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容,然后配置好page.json。就可以直接查看效果。
这个名为"js监听滚动条改变导航元素位置和样式.rar"的压缩包文件提供了一个实例,教你如何利用原生JavaScript来实现这一功能,特别适合初学者学习。以下是关于这个主题的详细讲解。 首先,我们需要理解滚动条事件。...
例如,在一个长页面中,我们可以根据用户的滚动位置来动态地显示或隐藏页面元素,或者在用户滚动到页面的特定部分时,加载额外的内容。 总结来说,`window.pageXOffset`、`window.pageYOffset`、`document....
### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...
在Web开发中,获取页面尺寸、滚动条位置以及元素位置是前端开发工程师经常需要处理的任务。这些功能对于动态调整页面布局、实现滚动监听以及确定元素在页面中的确切位置至关重要。本文将详细解释使用纯JavaScript...
然而,单纯使用CSS可能无法满足所有需求,特别是当需要动态计算元素位置以适应不同屏幕尺寸和滚动状态时,JavaScript库如jQuery就显得非常有用。 jQuery实现智能定位通常涉及以下步骤: 1. **选择元素**:首先,...
"让DIV固定在页面的某个...让DIV固定在页面的某个位置,而不随着滚动条的滚动而移动,可以通过使用CSS的position属性或JavaScript来实现。然而,在IE浏览器中,我们可能需要使用JavaScript来解决fixed值不生效的问题。
4. **判断元素位置**:在回调函数中,通过`.offset()`或`.position()`获取元素的位置,并与视口位置比较,判断元素是否在视口范围内。 5. **启动CSS3动画**:如果元素在视口内,使用jQuery的`.addClass()`或`....
2. **恢复滚动位置**:在页面加载完成后,根据之前记录的滚动位置信息,调整滚动条到相应的位置。 #### 三、实现方法 下面详细介绍一种常见的实现方式,即使用JavaScript来实现滚动条刷新定位。 ##### 3.1 记录...
Javascript 元素位置、大小、鼠标定位操作 本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 ...
在Vue应用中,有时我们需要获取页面元素的相对位置,以便实现一些交互效果,如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置,并提供示例代码。 首先,`getBoundingClientRect()` 是...
在网页中,可以通过`window.scrollTo()`或`document.body.scrollTop`和`document.documentElement.scrollTop`来控制或获取页面的滚动位置。其中,`document.body.scrollTop`适用于大多数情况,而`document....
JavaScript 提供了这样的功能,可以让我们控制网页平滑地滚动到指定的元素位置。本文将详细讲解如何利用 JavaScript 实现这个功能。 首先,我们要了解 JavaScript 中获取元素位置的基本方法。在提供的代码中,`...
需要注意的是,`scrollTop()`方法用于获取或设置元素的垂直滚动位置。在上述代码中,`scrollArea.scrollTop()`返回当前的滚动位置,`+ targetOffset`则是我们想要滚动到的新位置。你可以根据实际需求调整`...
2. **滚动监听**:使用JavaScript监听滚动事件,获取滚动条的位置或页面的滚动距离。 3. **计算偏移**:根据滚动距离,计算每个元素应该移动的距离。这通常涉及到一些数学计算,比如元素相对于视口的初始位置,以及...
5. **条件判断**:在用户滚动到特定位置时,通过比较元素位置与视口位置,可以决定是否启动动画。例如,当元素的顶部距离小于或等于视口的底部时,可以开始淡入动画。 6. **CSS准备**:为了实现淡入效果,需要预先...
首先,`scrollTop`是一个获取或设置元素垂直滚动位置的方法。当用作读取属性时,它返回元素顶部距离视口顶部的距离;当用作写入属性时,它会使元素的顶部与视口顶部对齐,从而实现滚动到指定位置的效果。 例如,...