`
reallyafei
  • 浏览: 99190 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

获取页面滚动位置或某元素的位置

阅读更多

一、获取页面滚动位置

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;}

 

分享到:
评论

相关推荐

    elementUI滚动条,点击dom元素滚动到指定位置.pdf

    我们使用 `ref` 属性来获取滚动条组件的引用,然后使用 `setScrollLeft` 方法来设置滚动条的滚动位置。 实现细节 在这个例子中,我们使用 Vue.js 的 Composition API 来实现滚动条的功能。我们首先定义了一个 `...

    获取元素绝对位置 position

    在前端开发中,获取元素的绝对位置是一个常见的需求,它涉及到网页布局和交互设计。"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,...

    Uniapp微信小程序滚动条跳转到元素高度

    Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容,然后配置好page.json。就可以直接查看效果。

    js监听滚动条改变导航元素位置和样式.rar

    这个名为"js监听滚动条改变导航元素位置和样式.rar"的压缩包文件提供了一个实例,教你如何利用原生JavaScript来实现这一功能,特别适合初学者学习。以下是关于这个主题的详细讲解。 首先,我们需要理解滚动条事件。...

    js获取滚动距离的方法

    例如,在一个长页面中,我们可以根据用户的滚动位置来动态地显示或隐藏页面元素,或者在用户滚动到页面的特定部分时,加载额外的内容。 总结来说,`window.pageXOffset`、`window.pageYOffset`、`document....

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

    ### JavaScript 获取滚动条位置并将页面滑动到锚点 #### 前言 在现代Web应用开发中,尤其是在移动端的应用场景下,用户交互体验尤为重要。其中一项常见的需求就是实现页面内的快速定位,即通常所说的“锚点”功能...

    JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    在Web开发中,获取页面尺寸、滚动条位置以及元素位置是前端开发工程师经常需要处理的任务。这些功能对于动态调整页面布局、实现滚动监听以及确定元素在页面中的确切位置至关重要。本文将详细解释使用纯JavaScript...

    jQuery实现页面滚动时元素智能定位

    然而,单纯使用CSS可能无法满足所有需求,特别是当需要动态计算元素位置以适应不同屏幕尺寸和滚动状态时,JavaScript库如jQuery就显得非常有用。 jQuery实现智能定位通常涉及以下步骤: 1. **选择元素**:首先,...

    6、jQ+CSS3页面滚动内容元素动画特效

    4. **判断元素位置**:在回调函数中,通过`.offset()`或`.position()`获取元素的位置,并与视口位置比较,判断元素是否在视口范围内。 5. **启动CSS3动画**:如果元素在视口内,使用jQuery的`.addClass()`或`....

    滚动条刷新定位

    2. **恢复滚动位置**:在页面加载完成后,根据之前记录的滚动位置信息,调整滚动条到相应的位置。 #### 三、实现方法 下面详细介绍一种常见的实现方式,即使用JavaScript来实现滚动条刷新定位。 ##### 3.1 记录...

    Javascript元素位置、大小、鼠标定位操作

    Javascript 元素位置、大小、鼠标定位操作 本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点,包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 ...

    Vue获取页面元素的相对位置的方法示例

    在Vue应用中,有时我们需要获取页面元素的相对位置,以便实现一些交互效果,如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置,并提供示例代码。 首先,`getBoundingClientRect()` 是...

    保持页面滚动条位置的javascript代码

    在网页中,可以通过`window.scrollTo()`或`document.body.scrollTop`和`document.documentElement.scrollTop`来控制或获取页面的滚动位置。其中,`document.body.scrollTop`适用于大多数情况,而`document....

    JavaScript控制网页平滑滚动到指定元素位置的方法

    JavaScript 提供了这样的功能,可以让我们控制网页平滑地滚动到指定的元素位置。本文将详细讲解如何利用 JavaScript 实现这个功能。 首先,我们要了解 JavaScript 中获取元素位置的基本方法。在提供的代码中,`...

    jQuery实现将div的滚动条滚动到指定位置

    需要注意的是,`scrollTop()`方法用于获取或设置元素的垂直滚动位置。在上述代码中,`scrollArea.scrollTop()`返回当前的滚动位置,`+ targetOffset`则是我们想要滚动到的新位置。你可以根据实际需求调整`...

    html5-页面滚动展示效果-js大屏页面特效

    2. **滚动监听**:使用JavaScript监听滚动事件,获取滚动条的位置或页面的滚动距离。 3. **计算偏移**:根据滚动距离,计算每个元素应该移动的距离。这通常涉及到一些数学计算,比如元素相对于视口的初始位置,以及...

    jQuery页面滚动文字图片元素淡入动画特效

    5. **条件判断**:在用户滚动到特定位置时,通过比较元素位置与视口位置,可以决定是否启动动画。例如,当元素的顶部距离小于或等于视口的底部时,可以开始淡入动画。 6. **CSS准备**:为了实现淡入效果,需要预先...

    ScrollTop滚动 jquery自定义滚动到指定位置

    首先,`scrollTop`是一个获取或设置元素垂直滚动位置的方法。当用作读取属性时,它返回元素顶部距离视口顶部的距离;当用作写入属性时,它会使元素的顶部与视口顶部对齐,从而实现滚动到指定位置的效果。 例如,...

Global site tag (gtag.js) - Google Analytics