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

相关文章