How is the CSS ScrollBar style compatible with IE8 and chrome browsers?

CSS Tutorials

Recently in the improvement of their website, accidentally found that click on the navigation of the different columns, the page text will have left and right flashing (drift) phenomenon, after careful examination of thinking, found that the problem in the browser on the scroll bar, that is: when the content of the page is not high to a screen, the right side does not appear scroll bar, The width of the screen should be the width of the entire display (assuming 1440), and when the content of the Web page is more than one screen, the width of the screen should be 1440-scroll bar width, for this reason, when you set the margin:0 auto, between the short screen and the long screen switch, Will cause a faint sense of bounce on the web.

Based on the above questions, think about how to solve, but after a constant attempt to conclude that the problem is basically not completely solved, because it depends on the performance of different browsers. Take IE8, Sogou, chrome three browser to do the test, you know, Sogou browser's latest version has compatible (ie core) and high-speed (WebKit core) two modes, high-speed mode, Sogou performance has been very close to Chrome (or I have not seen the difference), But strangely, in the compatibility mode, although the IE kernel is called, but it is not the same as the pure IE8 performance, for example, for short page (not enough one screen), Sogou although will not appear scroll bar, but on the right side of the screen will be reserved a blank width of the scroll bar alternate, that is, for Sogou compatibility mode, Regardless of the short screen long screen, the calculation width is always 1440-scroll bar width, IE8 is not, the short screen will not appear the reserved scroll bar alternate width, long screen when automatically add width, this unexpectedly and Chrome's performance is like, Incredible! There is a wide variety of browsers on the market, to do all compatible really powerless, so this piece I intend to give up making adjustments.

Although the problem is not resolved, but eventually the scroll bar to do a little landscaping, basically to achieve and page color uniformity. The CSS style of the scroll bar has been a good performance under IE, but Chrome is blind, online access to a large number of information, free from the major forums, basically said that Chrome's scroll bar can not be implemented with CSS, preferably with JS or pictures to simulate and so on, In the end, however, the an article provides a compatible code, and surprisingly, Chrome's scrollbar width can be set by code. Try it, feel good, record it (with comments, color code can be modified according to their own needs):
For IE8:

html,body {scrollbar-face-color: #FB4446;/* Color of scroll bar 3D surface (threedface) */scrollbar-highlight-color: #fff;/* The bright Edge (threedhighlight) color of the scrollbar 3D interface */scrollbar-shadow-color: #eeeeee; /* Dark Side (Threedshadow) color of the scrollbar 3D interface */scrollbar-3dlight-color: #eeeeee; /* scroll bar bright border color */scrollbar-arrow-color: #000; /* Color of scroll bar direction arrows */scrollbar-track-color: #fff; /* scroll bar's drag area (TrackBar) color */scrollbar-darkshadow-color: #fff; /* scroll bar Dark border (threeddarkshadow) color */}

For Chrome:

/*---scroll bar default display style--*/::-webkit-scrollbar-thumb{background-color: #FB4446;     height:50px;     outline-offset:-2px;     outline:2px solid #fff;     -webkit-border-radius:4px;  border:2px solid #fff;     }/*---Mouse click on the scroll bar display style--*/::-webkit-scrollbar-thumb:hover{background-color: #F01360;     height:50px;  -webkit-border-radius:4px;     }/*---scroll bar size--*/::-webkit-scrollbar{width:8px;  height:8px;     }/*---scroll box background style--*/::-webkit-scrollbar-track-piece{background-color: #fff;  -webkit-border-radius:0; }