前端工作小知识-01

CSS自定义滚动条样式

1. 滚动条整体部分：
   样式选择器::-webkit-scrollbar {} // 需要隐藏使用display:none;
2. 滚动条的可拖拽部分（滑块）
   样式选择器::-webkit-scrollbar-thumb {} // 需要设置::-webkit-scrollbar {} 属性 才会生效
3. 滚动条的滚动区域（轨道）
   样式选择器::-webkit-scrollbar-track {} // 需要设置::-webkit-scrollbar {} 属性 才会生效

.Box::-webkit-scrollbar {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 10px;
  height: 10px;
}

.Box::-webkit-scrollbar-thumb {
  width: 10px;
  border-radius: 10px;
  background: #535353;
}

.Box::-webkit-scrollbar-track {
  border-radius: 10px;
  border: 1px solid #535353;
  background-color: #b79191;
}

4. 滚动条两端的上/下（或左/右）按钮
   样式选择器::-webkit-scrollbar-button {}
5. 滚动条轨道未被滑块覆盖的部分
   样式选择器::-webkit-scrollbar-track-piece {}
6. 垂直滚动条和水平滚动条交汇的部分
   样式选择器::-webkit-scrollbar-corner {}

注意：也可以加active或hover设置滚动条的样式

多层级的样式覆盖问题

需求：给一个盒子加圆角效果，但圆角位置有多层元素覆盖。
方法：最外层加圆角，使用overflow:hidden属性（有滚动时此方法不可行）

CSS页面的响应式布局

@media screen and (max-width: 1000px) {} // 当屏幕尺寸小于1000px时，应用下面的CSS样式
@media screen and (min-width: 600px) {} // 当屏幕尺寸大于1000px时，应用下面的CSS样式

JS获取页面元素高度并设置其他元素与其保持一致

需求：某一元素的高度是不固定的（ 由显示的内容决定 ），要求另一元素与其保持一致
方法：DOM获取元素高度并设置其他元素高度
获取元素高度：document.getElementById(“div”).offsetHeight
设置元素高度：document.getElementById(“div”).style.height = document.getElementById(“div”).offsetHeight + “px”
clientHeight: 表示内容的实际高度( 内容 + padding ）
offsetHeight: 表示元素的实际高度( 内容 + padding + border ）
scrollHeight: 表示元素的实际高度( 内容 + padding + border + margin )
offsetLeft: 表示 box 盒子相对它的父容器水平的偏移
offsetTop: 表示 box 盒子相对它的父容器垂直的偏移

视口单位 vw和vh

vw: 相对于视口的宽度，1vw等于视口宽度的1% （ 总视口宽度为100vw ）
vh: 相对于视口的高度，1vh等于视口宽度的1% （ 总视口高度为100vw ）
vmin: 选取 vw 和 vh 中最小的那个
vmax: 选取 vw 和 vh 中最大的那个