这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战
一、body无滚动 + 弹层无滚动(css-超出隐藏)
适用场景需满足以下条件：
- body最好是一屏、无滚动
- 虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中
- 弹层不用滚动效果
解决方案：
弹层出现时，用css给body设置固定定位和超出隐藏。
btn.onclick = function () {
//弹层出现
layer.style.display = 'block';
document.body.style.overflow = "hidden";
document.body.style.position = "fixed"; // 果然是因为加了fixed.就会自动回滚到顶部
}
var closeBtn = document.getElementById('close');
closeBtn.onclick = function () {
// 弹层关闭
layer.style.display = 'none';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}
二、body无滚动和弹层内部滚动
适用场景需满足以下条件：
1、body最好是一屏、无滚动
2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中
解决方案：
弹层出现时，用css给body设置固定定位和超出隐藏。
至于弹层内部的滚动，设置一个overflow: scroll;即可。
不过为了流畅体验，可以加上-webkit-overflow-scrolling: touch，以解决在IOS上滚动惯性失效的问题，提高滚动的流畅度。
三、常用到的滚动条css属性
- ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
- ::-webkit-scrollbar-button 滚动条两端的按钮
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层滚动槽
- ::-webkit-scrollbar-thumb 滚动的滑块
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式
四、还有其他详细属性
:horizontal 水平方向的滚动条
:vertical 垂直 方向的滚动条
:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
:end 类似于start伪类，标识对象是否放到滑块的后面。
:double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
:corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。
:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
