window大小和滚动

窗口的width / height

为了获取窗口的(window)的宽度和高度，我们可以使用document.documentElement的 clientWidth / clientHeight

document.documentElement.clientHeight  
// 当前窗口的高度
document.documentElement.clientWidth
//当前窗口的宽度

注意这个窗口，窗口所指的就是浏览器的窗口，浏览器的窗口可以缩放，所以document.document.clientHeight 和 document.document.clientWidth的值是不固定的

浏览器也支持
```
window.innerWidth / window.innerHeight 
```
但是如果存在一个滚动条，并且滚动条会占用一些空间，但是
```
document.document.clientHeight   document.document.clientWidth
```
会返回减去滚动条之后的宽高

文档的 width / height

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

为了可靠的获得文档的高度，必须这么写

获得当前滚动

DOM元素的当前滚动状态在其scrollLeft / scrollTop属性中

但一些比较旧的webkit的浏览器则不行

所以，滚动可以用

window.pageYoffset window.pageXoffset

console.log(document.documentElement.scrollTop);
console.log(window.pageXOffset, window.pageYOffset);
  
  
document.documentElement.scrollTop == window.pageYOffset

以上都是只读属性

滚动：scrollTo, scrollBy,scrollIntoView

必须在DOM完全构建好之后才能通过JavaScript滚动页面，例如我们尝试通过中的脚本滚动页面，它将无法工作

可以通过更改 scrollTop/scrollLeft 来滚动常规元素。

我们可以使用 document.documentElement.scrollTop/scrollLeft 对页面进行相同的操作（Safari 除外，而应该使用 document.body.scrollTop/Left 代替）。

更加简单的解决方案
- window.scrollBy(x,y) 相对于当前的位置将页面滚动至(x, y)位置
```
window.scrollBy(0 , 100)
```
- window.scrollTo(pageX,pageY) 将页面滚动至绝对坐标
```
window.scrollTo(0, 1000)
```
  上面两种方法适用于所有浏览器

scrollIntoView

包含两个参数

默认 true

element.scrolllntoView()

//点击事件
this.scrollIntoView()

将页面滚动至当前元素在页面最顶端

false

element.scrollIntoView(false)

//点击事件
this.scrollIntoView(false)

将页面滚动至当前元素在页面的最底端

禁止滚动

页面禁止滚动

document.body.style.overflow = "hidden"

取消禁止滚动

document.body.style.overflow = ""

缺点：

这个方法在禁止滚动的时候，会使滚动条消失。如果滚动条占用了一些空间，他原本占用的空间就会空出来，那么内容就会去填充它，

如何解决这个缺点：

可以在设置禁止滑动之后，再在原来滚动条的地方设置padding把原来滚动条的位置撑起来就好

！！

获取当前滚动的值(只读，不能修改)
```
window.pageYOffset / window.pageXOffset
```
更改滚动的距离
- window.scrollTo(pageX,pageY)
  
  滚动至所输入的坐标位置
- window.scrollBy(x, y)
  
  滚动至，想对于当前元素x，y的位置
  
  （x，横向，y纵向）
- Element.scrollIntoView()
  
  两个参数
  - true(可以省略不写)
    
    将此元素滚动到窗口顶部
  - false
    
    将此元素滚动到窗口底部

禁止滚动

document.body.style.overflow = "hidden"

取消禁止滚动

document.body.style.overflow = ""

禁止body滚动的案例(伪代码)

--css
     body {
      height: 200vh;
    }
    
    .btn {
      background-color: red;
    }
    
 --html
     <body>
          <button id="btn">禁止滚动</button>
     </body>
 --js
 
 const body = document.body;
 const btn = document.querySelector("#btn");
 
 
 function toggle() {
  btn.classList.toggle("btn");
  if (btn.classList.contains("btn")) {
    btn.innerHTML = "开启滚动";
    body.style.overflow = "hidden";
  } else {
    btn.innerHTML = "禁止滚动";
    body.style.overflow = "";
  }
}

btn.addEventListener("click", toggle);

适用场景(只是我想到的一些)

窗口的 width / height

当我们需要在可用的窗口宽度以绘制或放置某些东西。也就是说，在滚动条内（如果有滚动条）。那么，我们应该使用 documentElement.clientHeight/ documentElement.clientWidth。如果说滚动条所占的位置不影响，那么也可以使用window.innerWidth / window.innerHeight。来获取当前窗口的大小
获得当前滚动

网页中常见的，滚动到某个地方的时候，会显示出一个回到顶部
scrollIntoView就很简单了，就相当于锚点，但是比锚点好用的是，它会直接把某个元素定位到文档的最顶部，或者最顶部

禁止滚动

当网页弹出小窗口的时候，可以设置让主页面不要滚动

             ---------------------------------------------------------持续更新的第四天

window的大小和滚动

window大小和滚动

窗口的width / height

文档的 width / height

获得当前滚动

滚动：scrollTo, scrollBy,scrollIntoView

禁止滚动

适用场景(只是我想到的一些)