这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下...
与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"); // 判断渲染模式是不是标准模式
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。