关于Scroll的CSS属性--修改滚动条样式

 本文部分转载自，仅用于学习关于css中的那些scroll - 炫意HTML5一、滚动轴scrollbar说到css中的scroll，我们最先想到的应该是overflow:scroll。想到这个scroll之后，自然而然又想到了浏览器的滚动轴。说到浏览器的滚动轴，mac和window显示各异，不同浏览器也显示不同。早起也有…https://www.xyhtml5.com/22830.html

::-webkit-scrollbar：整个滚动条
::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
::-webkit-scrollbar-thumb：滚动条上的滚动滑块
::-webkit-scrollbar-track：滚动条轨道
::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮）

 修改滚动条样式代码如下

::-webkit-scrollbar { // 滚动条样式
  width: 6px;    
  height: 6px;
}
::-webkit-scrollbar-corner{
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #464C71;
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: #464C71;
}

 效果如图

                        

 

scroll-behavior
有如下2个属性
  scroll-behavior: auto;
  scroll-behavior: smooth;
有了这个属性，可以让我们的滚动更加平滑。

 Scroll Snap
CSS Scroll Snap是CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置，包含scroll-以及scroll-snap-等诸多CSS属性。
  scroll-snap-type: none;
  scroll-snap-type: x;
  scroll-snap-type: y;
  scroll-snap-type: block;
  scroll-snap-type: inline;
  scroll-snap-type: both;
  /* Optional mandatory | proximity*/
  scroll-snap-type: x mandatory;
  scroll-snap-type: y proximity;
  scroll-snap-type: both mandatory;