一、scrollTop,scrollLeft

要获得页面的scrollTop及scrollLeft,在不同的浏览器中是不一样的:

谷歌浏览器和没声明DTD的文档,通过document.body.scrollTop;来获得

火狐和其他浏览器,通过document.documentElement.scrollTop;来获得

ie9+和最新的浏览器 均可以通过window.pageYOffset;来获得

综上,可以封装如下访问方法:

<script>
function scrollJson() {
if(window.pageYOffset != null) {//ie9+及其他浏览器
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode == "CSS1Compat"){//声明了DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
} window.onscroll = function () {
console.log(scrollJson());
}
</script>

二、同理,可以获得可视区域

function clientSize(){
if(window.innerWidth != null) {
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode == "CSS1Compat") {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}

JS关于scrollTop和可视区域clientWidth的更多相关文章

  1. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  2. js获取浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.innerHeight - 浏 ...

  3. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

  4. 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法

    有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...

  5. js获取可视区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  6. JS获取浏览器可视区域的尺寸

    所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnbl ...

  7. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  8. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  9. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

随机推荐

  1. MATLAB/Octave中implicit conversion from real matrix to real scalar错误原因与解决

    写程序时提示 implicit conversion from real matrix to real scalar的一个warning,主要问题在于将一个矩阵当成一个标量在使用.我的程序出现这个wa ...

  2. iOS 带箭头菜单选项弹窗LFPopupMenu

    一.效果图 由于是模拟器缩得比较小,一些细线可能显示不出来,不是bug哈. 二.用法 LFPopupMenuItem *item1 = [LFPopupMenuItem createWithTitle ...

  3. 【UEditor】关于导入ueditor-1.1.3.jar的问题---

    最近做一个项目,使用了百度的富文本框,本来是很简便易用的东西,在回显给富文本框的时候, var ue = UE.getEditor('container'); var noticeContent = ...

  4. Mac下php 5升级到php 7的步骤详解

    前言 在MAC OS X 10.11中php的版本是5.5的,近来一年多里,看到了很多关于php7介绍,以为php7增加了很多新特性,也删除了原来很多的老特性,所以一直以来并没想去尝试使用php7,但 ...

  5. python3 str和bytes之间转换

    a bytes-like object is required, not 'str' 碰到 这个错误 ,是因为需要是的bytes,不是str bytes -> str: 1  str-> ...

  6. 白话空间统计之:Moran&#39;s I(莫兰指数)

    前两天聊了空间统计学里面的两个经典概念,今天来说说第一篇文章留下的大坑:Moran's I. 首先,Moran's I这个东西.官方叫做:莫兰指数,是澳大利亚统计学家帕特里克·阿尔弗雷德·皮尔斯·莫兰 ...

  7. Walle代码发布系统

    Walle 一个web部署系统工具,配置简单.功能完善.界面流畅.开箱即用!支持git.svn版本管理,支持各种web代码发布,PHP,Python,JAVA等代码的发布.回滚,可以通过web来一键完 ...

  8. unity quaternion vector

    做脚印呢 做了曲面细分和decal两种 先用正交camera生成 高度图 采样uv由pos 从world到camera space生成 unity对tessellation的支持限制还是比较大的 只能 ...

  9. lumisoft邮件头不规范造成内容无法读取

    解决邮件内容为multipart,并且Param_Boundary等于null的不规范邮件内容无法读取问题,这样的邮件内容头部往往带两个或多个ContentType. 红色为自己加的,绿色为注释掉原来 ...

  10. Md5Hash的测试

    import org.apache.shiro.crypto.hash.Md5Hash; public static void main(String[] args) { /** * source 要 ...