一、scroll相关Api
总览
0.可选值options
options对象可以包含以下属性：
top: 滚动到垂直位置的像素值，默认值为0。left: 滚动到水平位置的像素值，默认值为0。behavior: 指定滚动的行为方式，可以设置为auto（浏览器默认行为）、smooth（平滑滚动）或不设置（没有平滑滚动效果）。默认值为auto。block: 指定在滚动到元素时垂直对齐方式。可以设置为**start、center、end或nearest。默认值为start**。inline: 指定在滚动到元素时水平对齐方式。可以设置为**start、center、end或nearest。默认值为start**。
1.滚动方法
a.window.scroll(x, y) 滚动到指定位置
功能：scroll是一个属性和方法，它允许您访问元素的滚动位置，并在必要时滚动元素，以确保某个内容或位置可见。您可以使用scroll属性来读取或设置元素的滚动位置，或者使用scroll() 方法来滚动元素到指定的位置。
语法：window.scroll(x, y) 或者 window.scroll(options)
举例：window.scroll(0, 500) 将页面滚动到垂直位置500像素的位置
b.window.scrollTo(options)滚动到指定位置
功能：scrollTo方法是scroll方法的一种变体，它仅用于将元素滚动到指定的位置。与scroll 不同，scrollTo 方法不会尝试使元素的任何特定位置或内容可见，而是只将元素滚动到指定的位置。
语法：window.scrollTo(x, y) 或者 window.scrollTo(options)
举例：window.scrollTo({ top: 500, behavior: 'smooth' }) 将页面滚动到垂直位置500像素的位置，使用平滑滚动行为
c.window.scrollBy(x, y)当前位置开始
**功能：**在当前滚动位置的基础上，滚动指定的x和y坐标
语法：window.scrollBy(x, y) 或者 window.scrollBy(options)
举例：window.scrollBy(0, 100) 在当前位置向下滚动100像素
d.Element.scrollIntoView(options)滚动到可视区域
功能： 将当前元素滚动到可视区域，可以传递一个options对象来设置滚动行为的选项
- 具体来说，
scrollIntoView()方法用于将元素滚动到其父元素或视口中可见的区域内。如果调用时不传递任何参数，则该元素将滚动到其父元素或视口的顶部，使其可见。 - 如果在调用
scrollIntoView()方法时传递了true作为参数，则元素将尽可能出现在视口的顶部，而如果传递false作为参数，则元素将尽可能出现在视口的底部。
语法：window.scrollIntoView(boolean) 或者 window.scrollIntoView(options)
举例：
// 将元素滚动到其父元素或视口中可见的区域内，使其可见
element.scrollIntoView();
// 将元素滚动到视口的顶部，使其尽可能出现在视口的顶部
element.scrollIntoView(true);
// 将元素滚动到视口的底部，使其尽可能出现在视口的底部
element.scrollIntoView(false);
//元素滚动到可视区域，使用平滑滚动行为
element.scrollIntoView({ behavior: 'smooth' })
e.Element.scrollIntoViewIfNeeded(options)滚动区域滚动到可视区域
功能： 可以将元素滚动到视口内（如果元素不可见），但只有在需要时才会滚动。
-
该方法可以接受一个可选的
options参数，其中包括一个名为block的属性，可以用来指定滚动的垂直对齐方式，以及一个名为inline的属性，可以用来指定滚动的水平对齐方式。block和inline属性可以取以下值之一："start"：元素的顶部或左侧与视口的顶部或左侧对齐。"center"：元素的中心与视口的中心对齐。"end"：元素的底部或右侧与视口的底部或右侧对齐。"nearest"：元素的顶部或底部与视口的顶部或底部对齐，取决于哪个更接近。
语法：window.scrollIntoViewIfNeeded() 或者 window.scrollIntoViewIfNeeded(options)
举例：
// 将元素滚动到视口内，如果元素不可见
element.scrollIntoViewIfNeeded();
// 将元素滚动到视口内，如果元素不可见，并将其顶部与视口顶部对齐
element.scrollIntoViewIfNeeded({ block: "start" });
// 将元素滚动到视口内，如果元素不可见，并将其中心与视口中心对齐
element.scrollIntoViewIfNeeded({ block: "center", inline: "center" });
2.滚动属性（图解）
a.Element.scrollTop
获取或设置元素的滚动垂直位置
b.Element.scrollLeft
获取或设置元素的滚动水平位置
c.Element.scrollHeight
获取元素的滚动高度
d.Element.scrollWidth
获取元素的滚动宽度
二、client、page、screen相关Api
1.clientX/clientY
在鼠标事件中，clientX和clientY属性表示鼠标相对于浏览器窗口可视区域的X和Y坐标位置。
2.pageX和pageY
在鼠标事件中，pageX和pageY属性表示鼠标相对于整个文档页面的X和Y坐标位置。
3.screenX和screenY
在鼠标事件中，screenX和screenY属性表示鼠标相对于用户屏幕的X和Y坐标位置。
4.clientWidth和clientHeight
该属性是元素的客户端宽度和高度，即元素内容区域的宽度和高度加上内边距。这些属性通常用于计算元素的布局或位置。
