How is CSS scroll bar style compatible with IE8 and Chrome browsers?

CSS Tutorial

Recently when I was improving my website, I accidentally discovered that when clicking on different columns in the navigation, the text on the web page would flash (drift) left and right. After careful inspection and consideration , and found that the problem lies in the scroll bar on the right side of the browser, that is: when the height of the web page content is less than one screen; there is no scroll bar on the right side, and the calculated screen width at this time should be the width of the entire monitor (assumed to be 1440 ), and when the height of the web page content exceeds one screen, the calculated screen width should be 1440-scroll bar width. For this reason, when you set margin: 0 auto and switch between short screen and long screen, This will cause a slight jittering sensation on the web page.

Based on the above problem, I was thinking about how to solve it, but after constant attempts, I finally came to the conclusion that this problem basically cannot be completely solved, because it also depends on the performance of different browsers. Take the three browsers IE8, Sogou, and Chrome for testing. As we all know, the latest version of Sogou browser has two modes: compatible (IE core) and high-speed (WebKit core). In high-speed mode, Sogou’s performance is already comparable to Chrome. It's close (or I haven't seen the difference yet), but the strange thing is that in compatibility mode, although the IE kernel is called, it behaves differently from pure IE8. For example, for short web pages (not enough for one screen) ), although Sogou will not appear scroll bars, it will reserve a blank width on the right side of the screen for scroll bars. That is to say, for Sogou compatibility mode, regardless of short screen or long screen, the calculated width will always be 1440-scroll bar width. However, this is not the case with IE8. The reserved alternate width of the scroll bar will not appear when the screen is short, and the width will be automatically added when the screen is long. This is the same as Chrome's performance, which is incredible! Currently, there are so many types of browsers on the market that it is impossible to make them compatible with all of them, so I plan to give up making adjustments in this area.

Although the problem was not solved, the scroll bar was finally beautified a little, and it was basically consistent with the color of the page. The CSS style of the scroll bar has always been very good in IE, but Chrome has turned a blind eye. After consulting a lot of information on the Internet and wandering around in major forums, they basically said that Chrome's scroll bar cannot be implemented with CSS. In the end, It's easy to use JS or pictures to simulate, etc., but in the end there are articles that provide compatible codes. Surprisingly, the width of Chrome's scroll bar can be set through code. I tried it, and it feels good. Record it (including comments, the color code can be modified according to your own needs):
For IE8:

html,body {
scrollbar-face-color:#FB4446; /*滚动条3D表面（ThreedFace）的颜色*/ 
scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/ 
scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/ 
scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/ 
scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */ 
scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/
scrollbar-darkshadow-color:#fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/ }

For Chrome:

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#FB4446;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#F01360;  
   height:50px;  
   -webkit-border-radius:4px;  
}  
/*---滚动条大小--*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

The above is the detailed content of How is CSS scroll bar style compatible with IE8 and Chrome browsers?. For more information, please follow other related articles on the PHP Chinese website!