这块确实太乱了,被兼容搞的简直快要晕死,默默地总结下...
与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>
参考链接:
http://www.css88.com/archives/1767
http://www.css88.com/archives/90
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop