滚动条相关的一些样式

example 1

这是默认的滚动,作为参考

example 2

这个示例是把滚动条隐藏,不影响滚动
::--webkit-scrollbar { display:none; }

example 3

这个示例基于示例2,区别是只会在内部滚动,不影响外部
overscroll-behavior: contain;

example 4

这个示例,用css自定义了滚动条的滑块和轨道,它们可以使用css属性改变它的样式,在这里是给了轨道背景图和滑块背景色以及圆角。

example 5

这个示例基础示例4,区别是overflow属性不是auto,而是overlay。那overlay是干嘛的呢,这个属性是决定滚动条绘制在内容之上而不是占用空间。
这个就可以解决滚动条导致页面跳动的问题,(开始没有滚动条,后来有滚动条后,页面宽度变化导致跳动