scrollX、scrollY和scrollTop、scrollLeft的区别

发表于 更新于 分类于 阅读次数：

scrollX、scrollY和scrollTop、scrollLeft比较

  • 相同点：都可以获取到滚动条的位置，都是window对象下的。bom对象
  • 不同点：scrollX、scrollY只读不写;scrollTop、scrollLeft：可读可写

例子:在console控制台有输入代码，出现相应的结果



获取到scrollTop、scrollLeft的方法是

  1. 原生js获取 

    1
    2
    let top = document.documentElement.scrollTop;
    let left = document.documentElement.scrollLeft;

  2. jq中的获取方法是

    1
    2
    let top =  $(window).scrollTop();
    let left =  $(window).scrollLeft();

用scollTop做一个返回顶部功能按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let back=document.querySelector(".back");
back.onclick = function () {
    let distance = document.documentElement.scrollTop;
    console.log(distance);
    let s = distance / 600 * 25;  //路程/时间=s *25每隔25ms秒 动的路程
    let st = setInterval(function () {
        distance -= s;
        if (distance <= 0) {
            distance = 0; //当l<=0时，设置l=0
            clearInterval(st);
        }
        document.documentElement.scrollTop = distance;
    }, 25)
}