How to display scroll bar beyond css

How to use css beyond the scroll bar display: 1. Use three containers to surround it, and there is no need to calculate the width of the scroll bar; 2. Pseudo-object selector for custom scroll bar [::webkit-scrollbar].

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Css method for displaying scroll bars beyond the limit:

Method 1: Surrounded by three containers, there is no need to calculate the width of the scroll bar

Compared with method 1, this method adds an extra box and limits the content to the box, so that you can not see the scroll bar and can scroll at the same time.

 
 
 ...... 
 
 
 .element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; }

Method 2: Customize the pseudo-object selector of the scroll bar::webkit-scrollbar

This method is not compatible with IE and can be used for mobile applications.

1 .element::-webkit-scrollbar { width: 0 !important } 　　IE 10+ 1 .element { -ms-overflow-style: none; } 　　Firefox 1 .element { overflow: -moz-scrollbars-none; }

Details:

The following is the custom webkit scroll bar style

Using the latest version of Google Chrome browser, the scroll bar style is already very beautiful. This webkit-scrollbar only works with webkit core.

webkit attribute

::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ }

Recommended related tutorials:CSS video tutorial

The above is the detailed content of How to display scroll bar beyond css. For more information, please follow other related articles on the PHP Chinese website!