Javascript中与Scroll有关的方法

时间:2021-12-05 15:05:00

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

与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