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

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)){

}
}

分享到:
评论

相关推荐

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

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

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

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

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    fixPosition:设定是否弹出框随滚动条一起浮动,保持在屏幕的固定位置,默认为true dragOut:设定是否允许拖出屏幕范围,默认为false。 autoClose:设定用户点击窗口中按钮后自动关闭窗口,默认为true(设定为...

    程序天下:JavaScript实例自学手册

    17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试代码(三) 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测...

    JavaScript完全自学宝典 源代码

    6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框。 6.12.html 单选框的JavaScript特效。 6.13.html 使用JavaScript控制按钮是否可用。 6.14.html 重置按钮的效果。 6.15....

    javascript函数的解释

    81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模态显示在IE4+行,...

    JS固定表头和左边列V2.0(源码)

    2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线,...

    107个常用javascript语句

    81.JS中的窗口滚动条:window.scroll(x,y) 82.JS中的窗口滚动到位置:window.scrollby 83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout 84.JS中的模態显示在IE4 行,...

    原生js实现放大镜特效

    1)offsetLeft是与父级元素的距离,不包过滚动条的距离 2)style.left返回的是字符串,如30px,offsetLeft返回的是数值30 3)style.lft是可读写的,offsetLeft是只读的,所以要改变div的位置只能修改style.left 4)...

    scrapy动态爬虫并存入mysql

    有时候,我们天真无邪的使用...然后,我们来拖动右侧的滚动条,这时就会发现,开发者工具里出现了新的js请求(还挺多的),不过草草翻译一下,很容易就能看出来哪个是取评论的,如下图 图三 好,复制出js请求的目标ur

    js-autocomplete-cookie:输入框自动补全 + 记录搜索缓存

    缓存数据最多显示 5 个,超过则显示滚动条。 点击同一行,不会再次记录到cookie 。 清除cookie 。 其他细节 比如js对象的使用。 重要JS文件: jquery.bigautocomplete.js jquery.cookie.js 测试数据:(输入框...

    asp.net图片瀑布流

    asp.net + javascript图片瀑布流 ...效果:滚动条滑到页面底部时自动加载下一页图片 两种展示方式:动态和静态 静态展示页面效果,动态展示从数据库取数据并绑定到页面的过程 vs2010项目 项目中包含数据库

    精易模块[永久免费] V3.12

    ' 增加 - 普通填表 网页_隐藏滚动条() ' 增加 - 普通填表.按钮_取对象() ' 增加 - 普通填表.复制框_取对象() ' 增加 - 普通填表.隐藏表单_取对象() ' 增加 - 普通填表.隐藏表单_取数量() ' 增加 - 普通填表.隐藏表单...

    Bootstrap Unicorn Admin

    Unicorn - Admin Template 是一款...自定义滚动条(jQuery NiceScroll) Enhanced modals (bootbox.js) 浏览器支持 最新版本的Chrome浏览器 最新版本的Safari浏览器 Opera 11以上 Firefox 4以上 Internet Explorer 8以上

    基于Bootstrap的网站后台模板Unicorn – Admin Template最新无错版

    Unicorn - Admin ... 自定义滚动条(jQuery NiceScroll) Enhanced modals (bootbox.js) 浏览器支持 最新版本的Chrome浏览器 最新版本的Safari浏览器 Opera 11以上 Firefox 4以上 Internet Explorer 8以上

    自然语言处理 新闻分类 flask

    后面的滚动的数据就是将后端取出来的数据展示在提前准备好的js上面(样式上面)** 项目简单,使用心强,单个模块拆卸简单 1、连接数据库 2、往相应的表中添加一些数据 3、读取表中的数据,展示在js上面(传递给js) ...

    JavaScript Table行定位效果

    一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!DOCTYPE ...

    利用JS实现简单的瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。 原理是: 1....

    飞飞模仿google(suggest)下拉提示框sggestV1.5

    isScroll 非必填 下拉框是否有滚动条[1有,0没有,默认0] arrow 非必填 否显示下拉框按钮[1是,0不是,默认0] arrowUrl 非必填 点击下拉框按钮时 执行的远程页面 ************************************************...

Global site tag (gtag.js) - Google Analytics