js 浏览器尺寸事件

1.浏览器尺寸

获取浏览器窗口的尺寸

• innerWidth 获取宽
• innerHeight 获取高
• 可视区域，包含滚动条

例

    console.log(innerWidth);    //此时浏览器窗口的宽度，改变浏览器窗口的大小，输出的数值也会跟着改变。
    console.log(innerHeight);    //此时浏览器窗口的高度，改变浏览器窗口的大小，输出的数值也会跟着改变。

卷去的高度和宽度

• 当页面比窗口宽或者高的时候，会有一部分内容随页面滚动而隐藏，上面隐藏的高度被称为 卷去的高度 左面隐藏的宽度被称为 卷去的宽度。

卷去的高度

• 页面必须要有DOCTYPE标签。
• 格式：document.documentElement.scrollTop
• 页面必须没有DOCTYPE标签。
• 格式：document.body.scrollTop

卷去的宽度

• 页面必须要有DOCTYPE标签。
• 格式：document.documentElement.scrollLeft
• 页面必须没有DOCTYPE标签。
• 格式：document.body.scrollLeft

例

    console.log(document.body.scrollTop);   //0
    console.log(document.body.scrollLeft);  //0

兼容写法

• var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
• var scrLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

例

    var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    console.log(scrTop);   //0
    console.log(scrLeft);  //0

2.滚动到指定位置

scrollTo()方法

• 滚动到指定位置。

写法

• scrollTo(横坐标，纵坐标)

• 不需要书写单位。
• 两个参数必须写全。

另一种写法

• scrollTo({
     top: 纵坐标,
    left:横坐标,
     //属性用来决定定位的方式是瞬间定位还是平滑定位 瞬间定位 instant 平滑定位 smooth。
     behavior:“smooth”
  });

3.滚动事件

窗口的滚动事件

• window.onscroll = 函数；（一般来说，都是写一个匿名函数。）
• 表示当窗口滚动的时候，会执行函数。

4.自定义滚动函数

• scrollTo（）函数只能设置滚动到指定地点，滚动时间是固定的，如果滚动的距离比较大，则滚动的比较快，如果想要匀速滚动，需要自己定义一个函数。

---

The end