javascript中的滚动到顶部和Scroll有关的方法

谁借莪１个温暖的怀抱￠ 2021-09-16 06:10 346阅读 0赞

转自：[https://www.cnblogs.com/zxjwlh/p/6284330.html][https_www.cnblogs.com_zxjwlh_p_6284330.html]

仅用于学习！！！

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

### 与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）对这两个属性都不支持，应该选用非标准的属性。

兼容性代码如下：（获取页面垂直和水平的滚动距离！）（复杂版）

![复制代码][copycode.gif]

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 )** ：

![复制代码][copycode.gif]

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.

![复制代码][copycode.gif]

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

### ***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;

兼容性代码如下：（获取、设置页面垂直方向的滚动距离！水平方向同理）（简易版）

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

**总结：**

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

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

![复制代码][copycode.gif]

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

![复制代码][copycode.gif]

[https_www.cnblogs.com_zxjwlh_p_6284330.html]: https://www.cnblogs.com/zxjwlh/p/6284330.html
[copycode.gif]: /images/20210813/8c643f1ea451498ca286be7b5f9af5e1.png