[CSS] Detailed scroll bar style

[Only summarize webkit, IE and firefox do not make records for now]

call out and close the scroll bar

1. If it is the scroll bar of the browser, it depends on the html tag, we do not need to set it, and the content overflow will appear automatically

/*对html标签的溢出样式隐藏即可*/
html {
    
    
    overflow-x:hidden; //隐藏水平滚动条
    overflow-y:hidden;//隐藏垂直滚动条
}

2. Set it in the div box that needs to call out the scroll bar

• overflow: scroll //When the content overflows, the scroll bars of the x-axis and y-axis will be displayed
  

• overflow-y: scroll //When the content overflows, only the y scroll bar will be called out [commonly used]
  

• overflow-x: scroll //When the content overflows, only the x scroll bar will be called out

Know the scroll bar

参考：https://segmentfault.com/a/1190000012800450?utm_source=tag-newest

These are settable elements for the scrollbars in the container:

::-webkit-scrollbar    //滚动条整体部分
::-webkit-scrollbar-button   //滚动条两端的按钮
::-webkit-scrollbar-track   // 外层轨道
::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
::-webkit-scrollbar-corner   //边角
::-webkit-resizer   ///定义右下角拖动块的样式

These elements can also be followed by some events:

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。

Usage example:

xxx::-webkit-scrollbar-track-piece:start {
    
    
   /* Select the top half (or left half) or scrollbar track individually */
}

xxx::-webkit-scrollbar-thumb:window-inactive {
    
    
   /* Select the thumb when the browser window isn't in focus */
}

xxx::-webkit-scrollbar-button:horizontal:decrement:hover {
    
    
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

Set the css reference for the scrollbar

[If you want to set the browser's default scroll bar, you can directly modify the css on the html tag in html::element:event{}]

Not too much bells and whistles, more concise. messageCard is the class of the custom div container.

.messageCard {
    
    
	overflow-y: scroll;
}
.messageCard::-webkit-scrollbar {
    
    
    width: 4px;
}
.messageCard::-webkit-scrollbar-thumb {
    
    
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}
.messageCard::-webkit-scrollbar-track {
    
    
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

Change the browser to:

/* 一般浏览器的不要太小，容易看不见 */
html::-webkit-scrollbar {
    
    
    width: 8px;
}
html::-webkit-scrollbar-thumb {
    
    
    border-radius: 5px;
    background: rgba(0,0,0,0.2);
}
html::-webkit-scrollbar-track {
    
    
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}