`
guoxuepeng
  • 浏览: 38626 次
文章分类
社区版块
存档分类
最新评论

js取页面滚动条的位置

 
阅读更多

js取页面滚动条的位置

网页可见区域宽:document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标

offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由

offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由

offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用: document.documentElement.scrollTop;而不是: document.body.scrollTop;

documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;

如果你想定位鼠标相对于页面的绝对位置时,你会发现google里面1000篇文章里面有999.99篇会让你使用 event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop, 如果你发现你的鼠标定位偏离了你的想象,请不要奇怪,这是再正常不过的事情。

ie5.5之后已经不支持document.body.scrollX对象了。 所以在编程的时候,请加上这样的判断 if (document.body && document.body.scrollTop && document.body.scrollLeft)

{ top=document.body.scrollTop; left=document.body.scrollleft; }

if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)

{ top=document.documentElement.scrollTop; left=document.documentElement.scrollLeft; }


给滚动条绑定事件

window.onscroll = function () {

//scrollTop各浏览器兼容
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(((scrollTop+window.screen.availHeight)>document.body.scrollHeight)){

}
}

分享到:
评论

相关推荐

    去掉网页中多余的滚动条

    #### 一、理解网页滚动条的基本概念 在开始解决实际问题前,我们先来了解一下滚动条的基本原理。滚动条是网页中用于帮助用户浏览内容的一种交互元素。当网页内容超出浏览器窗口大小时,浏览器会自动添加滚动条以便...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

    vue使用keep-alive切换页面,2种方法实现页面保持滚动位置.zip

    在Vue.js应用中,我们经常需要使用路由进行页面间的切换,但默认情况下,当用户从一个页面切换到另一个页面时,之前的页面状态会被重置,包括滚动位置。为了解决这个问题,Vue提供了一个名为`keep-alive`的组件,它...

    Jquery跟随滚动条漂浮层

    在网页设计中,"Jquery跟随滚动条漂浮层"是一种常见的交互效果,它使得某个元素(通常是广告、导航菜单或重要提示)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性。这种效果可以提高用户体验,因为...

    基于JavaScript实现自定义滚动条

    JavaScript实现自定义滚动条是一种常见的前端技术,它可以让开发者自定义滚动条的样式和行为,以适应网站或应用的特定设计需求。以下是一份详细解释如何使用JavaScript来创建自定义滚动条的指南。 首先,我们需要...

    解决Vue页面固定滚动位置的处理办法

    浏览器的滚动位置恢复行为可以分为两个步骤:在hashchange事件触发时,浏览器会拿到当前页面的document.body.scrollTop值,并与自己存储的滚动条位置进行比较,取最小的值,设置成当前的document.body.scrollTop值。...

    javascript 获取页面的高度及滚动条的位置的代码

    在Web开发中,获取页面的高度和滚动条位置是常见的需求,尤其是在页面布局或动态内容加载时。JavaScript为此提供了一系列的属性和方法,使得开发者能够精确地获取和控制这些信息。 标题“javascript 获取页面的高度...

    JS去除iframe滚动条的方法

    在网页设计中,有时我们可能不希望`iframe`元素显示滚动条,以保持页面的整洁和一致性。`iframe`(Inline Frame)是一种HTML标签,用于在网页中嵌入另一个文档,比如网页、视频或者地图等。`iframe`的滚动条默认情况...

    jquery多款滚动条插件插件.rar

    在现代Web开发中,jQuery是一个广泛使用的JavaScript库,它极大地简化了动态网页交互和事件处理。...记住,选择合适的滚动条插件取决于你的具体需求和项目特性,确保性能、兼容性和美学之间的平衡是关键。

    javascript经典特效---Iframe页面的滚动.rar

    - 使用`scrolling`属性可以全局禁用或启用Iframe的滚动条,但无法精确控制滚动位置。 - 若要精确控制滚动,需通过JavaScript操作`iframe.contentWindow.scrollTo(x, y)`,其中x和y分别是水平和垂直滚动的位置。 4...

    自定义滚动条

    在网页设计中,滚动条是不可或缺的元素,尤其是在长页面中。默认的滚动条样式往往较为单调,不能很好地融入各种网站的设计风格。本教程将详细讲解如何使用jQuery库来实现自定义滚动条,以增强用户体验并提升网页的...

    js固定DIV高度,超出部分自动添加滚动条的简单方法

    在网页设计中,有时我们需要对某个元素,如`<div>`,进行特定的布局处理,使其在内容超出预设高度时自动显示滚动条。这里提到的`js`方法就是一种实现这种效果的方式。通过JavaScript,我们可以动态地设置`div`的高度...

    js取滚动条的尺寸的函数代码

    创建一个嵌套节点,让外层节点产生滚动条,然后用offsetWidth – clientWidth即可获得滚动条宽度。需要注意的是为了避免页面抖动,可以设置外层元素position:absolute和visibility:hidden 参考: 代码如下: ...

    datatables表格分页、检索、排序、滚动条

    它提供了丰富的功能,包括分页、检索、排序以及滚动条等,极大地提升了用户在网页上处理数据的体验。在这个项目中,你将找到一个精心整理的Demo,帮助初学者快速理解和应用Datatables的核心特性。 1. 分页: ...

    js实现滚动条滚动到页面底部继续加载

    滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type="text/css"> html,body, div, dl, dt, d

    基于滚动条位置判断的简单实例

    1. **滚动条位置**:在网页中,滚动条的位置反映了用户浏览内容时已经滚动了多少距离。这个距离通常以像素为单位,可以通过`scrollTop`属性获取。 2. **滚动条距离顶部位置**:`scrollTop`属性表示的是当前窗口或...

    关于HTML中的滚动条/去掉滚动条问题

    /* 高度或宽度,取决于滚动条的方向 */ } ::-webkit-scrollbar-track { background: #f1f1f1; /* 轨道颜色 */ } ::-webkit-scrollbar-thumb { background: #888; /* 滚动条颜色 */ } ::-webkit-scrollbar-...

    python中selenium操作下拉滚动条的几种方法汇总

    在Python的Selenium自动化测试中,有时候我们需要操作网页的滚动条来使不可见的元素变得可见。这通常是因为这些元素位于当前视口之外,需要滚动页面才能访问。本文将汇总几种在Python中使用Selenium操作下拉滚动条的...

Global site tag (gtag.js) - Google Analytics