这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下...

与scroll相关的方法

4个window对象下:scrollX、scrollY、scrollTo、scroll(作用和scrollTo一样)

4个Element对象下:scrollWidth、scrollHeight、scrollLeft、scrollTop

window对象下(BOM)

window.scrollX、window.scrollY

var x = window.scrollX;  // 以像素为单位,返回水平轴上document已经被卷去的宽度   number类型
var y = window.scrollY; // 以像素为单位,返回垂直方向上document被卷曲的高度 number类型

pageYOffset 属性是 scrollY 属性的别名,pageXOffset同理,为了跨浏览器兼容,一般用后者(pageYOffset、pageXOffset)。

另外旧版本(<9)对这两个属性都不支持,应该选用非标准的属性。

兼容性代码如下:(获取页面垂直和水平的滚动距离!)(复杂版)

var supportPageOffset = window.pageXOffset !== undefined;  // 判断是否支持pageXOffset
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); // 判断渲染模式是不是标准模式
/**
* 如果支持pageXOffset,直接用window.pageXOffset. 如不支持,判断渲染模式
* 如果是标准模式,用document.documentElement.scrollLeft,
* 如果是混杂模式,用document.body.scrollTop.
**/
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

window.scrollTo( x-coord, y-coord )

MDN API原文:(以左上角为坐标原点,以像素为单位沿水平和垂直方向滚动到指定位置)

x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.

y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

不需要做兼容,可以直接用

window.scroll( x-coord, y-coord ): 作用同 window.scrollTo()

 

Element对象下(DOM):

scrollWidth:只读属性,返回该元素内容区域宽度自身宽度较大的一个,若自身宽度大于内容宽度(存在滚动条),则scrollWidth>clientWidth.

注意:该属性返回的是四舍五入后的整数值,如果需要小数,请用:Element.getBoundingClientRect().

var xScrollWidth = element.scrollWidth;

scrollHeight:只读属性,返回该元素内容高度。包含被overflow隐藏掉的部分。包含padding,不包含margin.如果需要小数,请用:Element.getBoundingClientRect().

var yScrollHeight = element.scrollHeight;

应用点:(判断元素是否滚动到底部,底下等式若返回 true ,则是,否则不是)

element.scrollHeight - element.scrollTop === element.clientHeight;

scrollLeft:读取或设置元素滚动条到元素左边的距离。

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft; //设置滚动条滚动了多少像素
element.scrollLeft = 10;

scrollTop:设置或获取该元素顶部距离其容器顶部的距离,无滚动条时为0。

//获取滚动的高度(被卷去的高度)
var intElementScrollTop = element.scrollTop; // 设置滚动的距离
element.scrollTop = intValue;

兼容性代码如下:(获取、设置页面垂直方向的滚动距离!水平方向同理)(简易版)

//获取滚轮滚动的距离,适配所有的浏览器
function getScrollY(){
return window.pageYOffset || document.documentElement.scrollTop;
}
//设置垂直方向滚轮滚动的距离,适配所有的浏览器,num为滚动距离
function setScrollY(num){
document.body.scrollTop = document.documentElement.scrollTop = num;
}

总结:

  由上面的两个兼容代码可以看出,我们总是把window下的scrollY(pageYoffset)、scrollX(pageXoffset)方法和element下的scrollTop、scrollLeft方法混在一起用,其实这两个是有本质区别的。一个获取的是window窗口的滚动距离一个获取的是某一个元素的滚动距离,当获取的元素是body时,window.scrollY(window.pageYoffset) = document.body.scrollTop。

扩展:关于获取各种浏览器可见窗口大小的一点点研究

<script>
function getInfo()
  {
var s = "";
s += " 网页可见区域宽:"+ document.body.clientWidth;
s += " 网页可见区域高:"+ document.body.clientHeight;
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽:"+ document.body.scrollWidth;
s += " 网页正文全文高:"+ document.body.scrollHeight;
s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 网页被卷去的左:"+ document.body.scrollLeft;
s += " 网页正文部分上:"+ window.screenTop;
s += " 网页正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的宽:"+ window.screen.width;
s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  }
</script>

扩展:准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

<script>
var cWidth = cHeight = sWidth = sHeight = sLeft = sTop = 0; if (document.compatMode == “BackCompat”) {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == “CSS1Compat”
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
</script>

博客地址:offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

参考链接:

http://www.css88.com/archives/1767

http://www.css88.com/archives/90

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

Javascript中与Scroll有关的方法的更多相关文章

  1. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...

  2. JavaScript中类似PHP的uniqid()方法

    JavaScript中类似PHP的uniqid()方法: function generateUIDNotMoreThan1million() { return ("0000" + ...

  3. 深入了解JavaScript中的Symbol的使用方法

    这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...

  4. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  5. Javascript中对象的Obeject.defineProperty()方法-------------(ES5/个人理解)

    在讲到Obeject.defineProperty()方法之前先得说明一下ECMAScript中有两种属性:数据属性和访问器属性. 两种属性存在的意义:描述对象属性(key)的一些特性,因为这些属性是 ...

  6. Javascript中的迭代、归并方法

    迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的 ...

  7. 在javascript中使用com组件的方法

    转载自:  http://dhailin.blog.163.com/blog/static/230738322011128102043880/ 首先创建一个COM组件,插入一个双接口Itest,在此接 ...

  8. javascript中对象的不同创建方法

    javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...

  9. Javascript 中创建自定义对象的方法(设计模式)

    Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. var ...

随机推荐

  1. Bitmap 位图 Java实现

    一.结构思想 以 bit 作为存储单位进行布尔值存取的数据结构. 表现为:给定第i位,该bit为1则表示true,为0则表示false. 二.使用场景及优点 适用于对布尔或0.1值进行(大量)存取的场 ...

  2. c# winform调用摄像头识别二维码

    首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...

  3. 20135202闫佳歆--week5 分析system_call中断处理过程--实验及总结

    week 5 实验:分析system_call中断处理过程 一.使用gdb跟踪分析一个系统调用内核函数(上周选择那一个系统调用)--getpid 复习视频: 如何实现? - 更新menu代码到最新版 ...

  4. Apache ActiveMQ 学习一

    Apache ActiveMQ 5.8.0 Java 7 support (compiled with jdk6 and validated with jdk7) apache-activemq-5. ...

  5. 基于 Laravel 的 文件管理

    以 laravel 5.5 为例,框架集成了文件系统和云存储功能 可以实现文件夹列表.创建.重命名.删除,文件列表.上传.重命名.删除等操作 一.先进行配置 在 config 文件夹下有 filesy ...

  6. Android Sensor——传感器

    Android SDK 支持的传感器类型,在Sensor类中的定义: 01.TYPE_ACCELEROMETER  : 加速传感器(硬件) 02.TYPE_AMBIENT_TEMPERATURE : ...

  7. ELK环境配置

    一.安装java环境 1.下载jre并安装,安装过程中没有什么特殊的,一直默认下一步即可. 2.配置环境变量 其中变量值为我们安装的jre的路径 二.安装elasticsearch 1.下载es安装包 ...

  8. 动态sql防止报错的写法 当判断语句都是null时候会报错 需要手动添加一个判断语句 一般id都会存在

  9. sql问题--case-when

    1. 有表如下,请使用查询语句得出相应结果 id job createdate 1 开发 2018-06-19 2 运维 2018-06-20 3 开发 2018-06-19 4 开发 2018-06 ...

  10. BZOJ2435 NOI2011道路修建

    要多简单有多简单.然而不知道为啥在luogu上过不掉. #include<iostream> #include<cstdio> #include<cmath> #i ...